ShibeiWorkPlatform_Frontend/src/views/modules/systemManagement/serviceMatter/service.vue

<template>
  <div class="div_main">

    <div class="div_table">
      <div class="div_btn">
        <el-button class="diy-button--add" size="small"
                   @click="handleAdd">新增</el-button>

      </div>

      <el-table class="table"
                :data="tableData"
                border
                :height="tableHeight"
                v-loading="tableLoading"
                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
                style="width: 100%">

        <el-table-column prop="categoryName"
                         header-align="center"
                         align="center"
                         label="分类名称"
                         min-width="280">
        </el-table-column>
        <el-table-column prop="awardPoint"
                         header-align="center"
                         align="center"
                         label="积分"
                         min-width="80">
        </el-table-column>

        <el-table-column prop="usableFlagShow"
                         header-align="center"
                         align="center"
                         label="状态"
                         min-width="100">
        </el-table-column>

        <el-table-column label="操作"
                         fixed="right"
                         width="190"
                         header-align="center"
                         align="center"
                         class="operate">
          <template slot-scope="scope">
            <el-button v-if="scope.row.usableFlag"
                       type="text"
                       class="div-table-button--delete"
                       size="small"
                       @click="handleDisable(scope.row,'disable')">禁用</el-button>
            <el-button v-if="!scope.row.usableFlag"
                       type="text"
                       class="div-table-button--detail"
                       size="small"
                       @click="handleDisable(scope.row,'able')">启用</el-button>

            <el-button type="text"
                       class="div-table-button--edit"
                       size="small"
                       @click="handleEdit(scope.row)">修改</el-button>

          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 修改弹出框 -->
    <el-dialog :visible.sync="formShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :title="formTitle"
               width="50%"
               top="5vh"
               @closed="diaClose">
      <service-form ref="ref_form"
                    :customerId="customerId"
                    @dialogCancle="addFormCancle"
                    @dialogOk="addFormOk"></service-form>
    </el-dialog>

  </div>
</template>

<script>

import serviceForm from './serviceForm'


import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      loading: false,
      total: 0,
      pageSize: 10,
      pageNo: 0,
      tableLoading: false,
      customerId: '',
      tableData: [],

      //form相关
      formShow: false,
      formTitle: '新增二级分类',

    }
  },
  components: {
    serviceForm
  },
  async created () {

  },
  async mounted () {


    this.initData()
  },

  methods: {
    initData () {
      let { user } = this.$store.state
      if (!user.customerId) {

        setTimeout(() => {
          this.initData()
        }, 500)
      } else {
        this.customerId = user.customerId
        this.loadTable()
      }
    },
    handleSearch () {
      this.loadTable()
    },

    async loadTable () {
      this.tableLoading = true

      const url = "/heart/serviceitem/list"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/serviceitem/list"
      let params = {
        customerId: this.customerId
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.total = data.total
        this.tableData = data.list
        this.tableData.forEach(item => {
          item.usableFlagShow = item.usableFlag ? '启用' : '禁用'
        });

      } else {
        this.$message.error(msg)
      }
      this.tableLoading = false
    },



    diaClose () {
      this.$refs.ref_form.resetData()
      this.formShow = false
    },


    handleAdd () {
      this.formTitle = '新增二级分类'
      this.formShow = 'edit'
      this.$nextTick(() => {
        this.$refs.ref_form.initForm('add', null)
      })
    },

    handleEdit (row) {
      this.formTitle = '修改'
      this.formShow = true
      this.$nextTick(() => {
        this.$refs.ref_form.initForm('edit', row)
      })
    },

    addFormCancle () {
      this.formShow = false
    },
    addFormOk () {
      this.formShow = false
      this.loadTable()

    },

    async handleDisable (row, type) {
      let title = type === 'able' ? '启用' : '禁用'

      this.$confirm("确认" + title + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.disableService(row, type)
        })
        .catch(err => {
          if (err == "cancel") {

          }

        });
    },

    async disableService (row, type) {
      const url = "/heart/serviceitem/updatestatus"
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/serviceitem/updatestatus"

      let params = {
        categoryId: row.categoryId,
        usableFlag: type === 'able'
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功"
        });

        this.loadTable()
      } else {
        this.$message.error(msg)
      }
    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {
    tableHeight () {
      const h = this.clientHeight - 210 + this.iframeHeigh
      const _h = this.clientHeight - 210
      return this.$store.state.inIframe ? h : _h
    },

    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
  watch: {

  },
  props: {

  }
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/buttonstyle.scss";

.div_main {
  width: 100%;
}

.div_search {
  background: #ffffff;
  border-radius: 4px;
  padding: 30px 20px 5px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}

.item_width_1 {
  width: 260px;
}
.item_width_2 {
  width: 620px;
}

.div_table {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;

  padding: 23px 30px 10px;

  .table {
    margin-top: 20px;
  }
}

.div_btn {
}

.el-row {
  /* margin-bottom: 20px; */
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: 50px;
}
</style>