middleground_code_v2/src/views/masterDataOptions/authority/index.vue

<template>
  <div class="wrap">
    <div class="btn">
      <div class="chunk">
        <el-button
          icon="el-icon-back"
          @click="
            $router.replace({ path: '/integrationOption/masterDataOptions' })
          "
        >返回
        </el-button
        >
      </div>
      <div class="chunk">
        <el-button
          icon="el-icon-first-aid-kit"
          type="primary"
          @click="saveHandle"
          :loading="saveLoading"
        >保存
        </el-button
        >
      </div>
    </div>
    <div class="main" v-loading="mainLoading">
      <baseTable :tableData="tableData" :tabLoading="tabLoading"
                 :funData="funData"
                 @onFunc="onFunc"
                 :tableColumn="tableColumn" :border="false">
        <template #roleId="{row}">
          <el-select v-model="row['roleId']" placeholder="请选择" style="width: 80%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
        <template #checkBox="{row}">
          <el-checkbox v-model="row[item.buttonType]" v-for="item in checkArr"
                       :label="item.buttonType" :key="item.buttonType">{{ item.buttonName }}
          </el-checkbox>
        </template>
      </baseTable>
      <div class="receiptsAddRow">
        <el-link
          type="primary"
          @click="addRowHandle"
          :underline="false"
        >+ 添加
        </el-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import baseNewSelect from "@/views/applicationList/com/baseNewSelect.vue";
import baseDialog from "@/views/integrationOption/compoments/baseDialog";
import BaseTable from "@/views/intergrationTask/compoments/baseTable.vue";
import baseNewForm from "@/views/intergrationTask/compoments/baseNewForm";
import {getApiModuleApi} from "@/api/apiChunks";
import {deepClone} from "@/utils/index.js";
import {getUserModuleApi} from "@/api/integrationOption/integrationOption";
import basePage from "@/views/intergrationTask/compoments/basePage.vue";

export default {
  data() {
    return {
      mainLoading: false,
      saveLoading: false,
      funData: [
        {
          text: "删除",
          color: "red"
        }
      ],
      options: [],
      // 角色字典
      roleDist: {},
      addSwitch: false,
      tabLoading: false,
      tableColumn: [
        {
          title: "角色名称",
          id: "roleId",
          width: 300,
        },
        {
          title: "按钮权限配置",
          id: "checkBox",
        }
      ],
      tableData: [],
      pageModel: {
        pageIndex: 1,
        total: 10,
        limit: 10,
      },
      addRole: "",
      checkArrDist: {
        new: {
          buttonName: "新建",
          buttonType: "new"
        },
        contrast: {
          buttonName: "档案对照",
          buttonType: "contrast"
        },
        resize: {
          buttonName: "重置",
          buttonType: "resize"
        },
        search: {
          buttonName: "查询",
          buttonType: "search"
        },
        edit: {
          buttonName: "修改",
          buttonType: "edit"
        },
        dele: {
          buttonName: "删除",
          buttonType: "dele"
        },
        view: {
          buttonName: "查看",
          buttonType: "view"
        },
        send: {
          buttonName: "下发",
          buttonType: "send"
        },
      },
      checkArr: [
        {
          buttonName: "新建",
          buttonType: "new"
        },  {
          buttonName: "重置",
          buttonType: "resize"
        }, {
          buttonName: "查询",
          buttonType: "search"
        }, {
          buttonName: "修改",
          buttonType: "edit"
        }, {
          buttonName: "删除",
          buttonType: "dele"
        }, {
          buttonName: "查看",
          buttonType: "view"
        }, {
          buttonName: "下发",
          buttonType: "send"
        },
      ]
    };
  },
  methods: {
    onFunc(row) {
      this.tableData.splice(row.index, 1)
    },
    addRowHandle() {
      this.tableData.push({})
    },
    async initSelect() {
      const res = await getApiModuleApi({
        tl: "roleService",
        as: "role",
        dj: "queryAll",
      })
      console.log(res, '角色')
      if (res.status === '200') {
        this.options = []
        res.attribute.forEach(item => {
          this.$set(this.roleDist, item.id, item.roleName)
          this.options.push({
            label: item.roleName,
            value: item.id
          })
        })
        console.log(this.options)
      }
    },
    async init() {
      this.mainLoading = true
      const res = await getApiModuleApi({
        tl: "mdmService",
        as: "mdmService",
        dj: "queryMdmModuleRule",
      }, {id: this.$route.query.id})
      res.attribute.forEach(item => {
        item.mdmModuleRoleButtonEntities.forEach(ele => {
          item[ele.buttonType] = true
        })
      })
      this.mainLoading = false
      this.tableData = res.attribute
    },
    //close
    dialogCloseHandle() {
      this.addRole = ""
    },
    //add
    addHandle() {
      this.addSwitch = true
    },
    // 页码
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel;
      this.$nextTick(() => {
      });
    },
    async saveHandle() {
      let params = {
        id: this.$route.query.id,
        mdmModuleRoleEntities: []
      }
      let temp = []
      let flag = this.tableData.some(item => {
        console.log(item)
        if (temp.includes(item.roleId)) {
          this.$vmNews("禁止选择相同角色", 'warning')
          return true
        }
        temp.push(item.roleId)
        if (item.roleId) {
          let tempObj = {
            roleId: item.roleId,
            mdmModuleRoleButtonEntities: [],
          }
          Object.keys(item).forEach(ele => {
            if (this.checkArrDist[ele] && item[ele]) {
              tempObj.mdmModuleRoleButtonEntities.push(this.checkArrDist[ele])
            }
          })
          params.mdmModuleRoleEntities.push(tempObj)
        }
      })
      if (flag) return
      this.saveLoading = true
      const res = await getUserModuleApi({
        tl: "mdmService",
        as: "mdmService",
        dj: "doSaveMdmModuleRule",
      }, params)
      if (res.status === '200') {
        this.$vmNews("保存成功", 'success')
        this.init()
        this.$store.dispatch("GenerateRoutes")
      }
      this.saveLoading = false
    }

  },
  components: {
    baseNewForm,
    BaseTable,
    baseDialog,
    baseNewSelect,
    basePage
  },
  created() {
    this.initSelect()
    this.init()
    this.$emit("flashActive", 3)
  },
};
</script>

<style scoped lang="scss">
.receiptsAddRow {
  margin-top: 30px;
  border: 1px dotted #ccc;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

::v-deep .el-button {
  border-radius: 16px;
}

::v-deep .el-form-item {
  display: block !important;
}

.checkChunk {
  display: flex;
  flex-wrap: wrap;
}

.wrap {
  background-color: #fbfbfb;
  width: 100%;
  overflow: auto;

  > .btn {
    display: flex;
    justify-content: flex-end;

    > .chunk {
      margin-left: 10px;
    }
  }

  > .main {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;

    .btn {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
  }

}

footer {
  margin-top: 20px;
}

.addBox {
  > .chunk {
    display: flex;
    align-items: center;
  }
}
</style>