opms_frontend/src/views/base/productAuth/index.vue

<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2023-02-13 11:50:01
 * @LastEditors: wanglj
 * @LastEditTime: 2023-02-14 09:32:28
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\base\productAuth\index.vue
-->
<template>
  <div class="product-auth-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-form ref="queryForm" :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input v-model="queryForm.keyWords" placeholder="姓名" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <table-tool :check-list.sync="checkList" :columns="columns" />
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table v-loading="listLoading" border :data="list" :height="$baseTableHeight(1)">
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        :prop="item.prop"
        show-overflow-tooltip
        :sortable="item.sortable"
        :width="item.width">
        <template #default="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="120px">
        <template #default="{ row }">
          <el-button v-permissions="['base:productLine:grant']" type="text" @click="handleAuth(row)">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
    <!-- 授权弹窗 -->
    <el-dialog title="产品线授权" :visible.sync="visible" width="500px" @close="handleClose">
      <el-form ref="form" :model="form">
        <el-form-item prop="productLine">
          <el-checkbox-group v-model="form.productLine" @change="$forceUpdate()">
            <el-checkbox v-for="item in productList" :key="item.productCode" :label="item.productCode">
              {{ item.productName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import proAuthApi from '@/api/base/productAuth'
  import TableTool from '@/components/table/TableTool'
  import to from 'await-to-js'

  export default {
    name: 'ProductAuthorize',
    components: {
      TableTool,
    },
    data() {
      return {
        total: 0,
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          keyWords: '',
          deptId: 1001,
        },
        layout: 'total, sizes, prev, pager, next, jumper',
        listLoading: false,
        list: [],
        checkList: [],
        columns: [
          {
            label: '姓名',
            width: '120px',
            prop: 'userName',
            sortable: false,
            disableCheck: true,
          },
          {
            label: '岗位',
            width: '120px',
            prop: 'userPost',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '电话',
            width: '120px',
            prop: 'userPhone',
            sortable: false,
            disableCheck: false,
          },
          {
            label: '授权产品线',
            width: 'auto',
            prop: 'productName',
            sortable: false,
            disableCheck: true,
          },
        ],
        visible: false,
        productList: [],
        form: {
          userId: 0,
          userName: '',
          userPost: '',
          userPhone: '',
          productLine: [],
        },
      }
    },
    computed: {
      finallyColumns() {
        return this.columns.filter((item) => this.checkList.includes(item.label))
      },
    },
    mounted() {
      this.getProducts()
      this.fetchData()
    },
    methods: {
      async fetchData() {
        const [err, res] = await to(proAuthApi.getList(this.queryForm))
        if (err) return
        this.list = res.data.list || []
        this.total = res.data.total
      },
      handleSearch() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      getProducts() {
        this.getDicts('sys_product_line').then((response) => {
          let arr = response.data.values || []
          for (const item of arr) {
            this.productList.push({
              productCode: item.key,
              productName: item.value,
              remark: item.remark,
            })
          }
        })
      },
      reset() {
        this.resetForm('queryForm')
        this.fetchData()
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      // 授权
      async handleAuth(row) {
        this.form = { ...row }
        this.form.productLine = row.productCode ? row.productCode.split(',') : []
        this.visible = true
      },
      handleClose() {
        this.form = {
          userId: 0,
          userName: '',
          userPost: '',
          userPhone: '',
          productLine: [],
        }
        this.$refs.form.clearValidate()
      },
      // 确认授权
      async save() {
        let arr = []
        for (const key of this.form.productLine) {
          const obj = this.productList.find((item) => item.productCode == key)
          if (obj) arr.push(obj)
        }
        const params = { ...this.form }
        params.lines = arr
        const [err, res] = await to(proAuthApi.authorize(params))
        if (err) return
        this.$message.success(res.msg)
        this.visible = false
        this.fetchData()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-checkbox {
    width: 100%;
  }
</style>