ccl-lnj-vue/src/views/modules/base/fieldRoleControl.vue

<template>
  <div class="mod-config">
    <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;">
      <el-form :inline="true" label-position="top" style="margin-top: 0px">
        <el-button type="primary" @click="searchTable()">查询</el-button>
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
          class="el-button el-button--primary el-button--medium">
          {{ '导出' }}
        </download-excel>
      </el-form>
    </el-form>
    <el-table
      :data="dataList"
      :height="height"
      border
      v-loading="dataListLoading"
      style="width: 100%; ">
      <el-table-column
        v-for="(item,index) in columnList1" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="150"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <a type="text" size="small" @click="fieldModel(scope.row)">查看字段</a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="600px"
      title="字段明细"
      :close-on-click-modal="false"
      :visible.sync="modelFlag">
      <el-form label-position="top" style="margin-top: 1px; margin-left: 0px;">
        功能名称：   <el-input v-model="rowData.functionName" style="width: 130px" readonly></el-input>
      </el-form>
      <el-table
        height="300"
        :data="fieldList"
        border
        style="width: 100%">
        <el-table-column
          prop="fieldName"
          header-align="center"
          align="left"
          min-width="80"
          label="字段名">
        </el-table-column>
        <el-table-column
          prop="fieldDesc"
          header-align="center"
          align="left"
          min-width="100"
          label="字段描述">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          width="60"
          label="操作">
          <template slot-scope="scope" class="foo_container">
            <a type="text" size="small" @click="accessModel(scope.row)">授权</a>

          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modelFlag = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      style="font-size: 12px"
      v-drag
      :title="'字段授权'"
      :visible.sync="accessModelFlag"
      width="518px"
      :append-to-body="true">
      <el-transfer v-model="accessFieldList"  class="rq" filterable :props="{
      key: 'username',
      label: 'userDisplay'
    }" :data="userList" :titles="['未选择', '已选择']"></el-transfer>
      <span slot="footer" class="dialog-footer">
        <div style="margin-top: 5px">
                <el-button type="primary" @click="saveAccessFieldListForField()">确定</el-button>
                <el-button @click="accessModelFlag = false" type="primary">取消</el-button>
        </div>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    searchFieldFunctionList,
    searchFieldListWithFunction,
    searchAccessFieldListForField,
    saveAccessFieldForField,
  } from "@/api/base/field.js"

  export default {
    components: {

    },
    data() {
      return {
        height:200,
        dataList: [],
        dataListLoading: false,
        currentRow:'',
        columnList1:[
          {
            userId: this.$store.state.user.name,
            functionId: 998006,
            serialNumber: '998006Table1FunctionName',
            tableId: "998006Table1",
            tableName: "项目物料",
            columnProp: "functionName",
            headerAlign: "center",
            align: "left",
            columnLabel: "功能名称",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },{
            userId: this.$store.state.user.name,
            functionId: 998006,
            serialNumber: '998006Table1FunctionGroup',
            tableId: "998006Table1",
            tableName: "功能分组",
            columnProp: "functionGroup",
            headerAlign: "center",
            align: "left",
            columnLabel: "功能分组",
            columnHidden: false,
            columnImage: false,
            columnSortable: false,
            sortLv: 0,
            status: true,
            fixed: '',
            columnWidth: 80
          },
        ],
        rowData:{
          functionId:'',
          functionName:'',
        },
        // 导出 start
        exportData: [],
        exportName: '功能清单'+this.dayjs().format('YYYYMMDDHHmmss'),
        exportHeader: ["功能清单"],
        exportFooter: [],
        // 导出 end
        modelFlag:false,
        accessModelFlag:false,
        fieldList:[],
        rowFieldId:'',
        accessFieldList:[],
        userList:[],
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.height = window.innerHeight - 140;
      })
      this.searchTable()
    },
    methods: {


      searchTable(){
        searchFieldFunctionList().then(({data}) => {
          //区分请求成功和失败的状况
          if (data && data.code == 0) {
            this.dataList = data.rows;
          } else {
            this.dataList = [];
          }
        });
      },
      fieldModel(row){
        this.rowData.functionId=row.functionId;
        this.rowData.functionName=row.functionName;
        searchFieldListWithFunction(this.rowData).then(({data}) => {
          //区分请求成功和失败的状况
          if (data && data.code == 0) {
            this.fieldList = data.rows;
          } else {
            this.fieldList = [];
          }
        });
        this.modelFlag=true;
      },
      accessModel(row){
        this.rowFieldId=row.fieldId
        searchAccessFieldListForField({fieldId:row.fieldId,
         }).then(({data}) => {
          this.accessFieldList = data.accessFieldList
          this.userList=data.userList
        })
        this.accessModelFlag=true
      },
      saveAccessFieldListForField(){
        let inList=[];
        for (let i = 0; i < this.accessFieldList.length; i++) {
          let inData={
            username:this.accessFieldList[i],
            fieldId:this.rowFieldId
          }
          inList.push(inData)
        }
        let saveData={
          fieldId:this.rowFieldId,
          accessFieldList:inList,
        }
        saveAccessFieldForField(saveData).then(({data}) => {
          if (data && data.code === 0) {
            this.$message.success( '操作成功')
            this.accessModelFlag = false
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //导出excel
      async createExportData() {

        return this.dataList;
      },
      startDownload() {
        //  this.exportData = this.dataList

      },
      finishDownload() {
      },
      fields() {
        let json = "{"
        this.columnList1.forEach((item, index) => {
          if (index == this.columnList1.length - 1) {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
          } else {
            json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
          }
        })
        json += "}"
        let s = eval("(" + json + ")")

        return s
      },

    },
  }
</script>

<style scoped>

</style>