Source/plt-web/plt-web-ui/src/views/systemModel/systemConfig/index.vue

@@ -1,10 +1,441 @@
<template>
  <el-container>
    <el-aside>
      <basic-container>
        <div style="max-height: calc(100vh - 170px);overflow: auto">
          <avue-tree :key="refresh" ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick">
          <span slot-scope="{ node, data }" class="el-tree-node__label">
           <span style="font-size: 15px">
              <i class="el-icon-s-promotion"></i>
                {{ (node || {}).label }}
            </span>
          </span>
          </avue-tree>
        </div>
      </basic-container>
    </el-aside>
    <el-main>
      <basic-container>

        <avue-crud
          ref="crud"
          :data="configData"
          :option="nodeRow.id === 'firstNode'? firstOption : configOption"
          :table-loading="configLoading"
          @selection-change="selectChange"
          @row-click="rowClickHandler">
          <template slot="menuLeft">
            <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">增加
            </el-button>
            <el-button icon="el-icon-close" plain size="small" type="danger" @click="delClickHandler">删除
            </el-button>
            <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出
            </el-button>
          </template>

          <template #menu="{row,index,size}">
            <el-button icon="el-icon-edit" size="small" type="text" @click.stop="rowEditHandler(row,index)">编辑
            </el-button>
            <el-button icon="el-icon-delete" size="small" type="text" @click.stop="rowDeleteHandler(row)">删除</el-button>
          </template>
        </avue-crud>
      </basic-container>
    </el-main>
    <el-dialog
      v-dialogDrag
      :title="nodeRow.id === 'firstNode' ? '配置项分类' : '配置项'"
      :visible.sync="addVisible"
      append-to-body="true"
      class="avue-dialog"
      width="50%"
      @close="addVisibleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item v-if="nodeRow.id !== 'firstNode'" label="key：">
          <el-input v-model="form.key"></el-input>
        </el-form-item>
        <el-form-item v-if="nodeRow.id !== 'firstNode'" label="value：">
          <el-input v-model="form.value"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="form.desc" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addVisibleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="addSaveClickHandler">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 导出穿梭框 -->
    <transfer ref="transfer" :left-role-data="leftRoleData" :right-role-data="rightRoleData"
              :select-list="selectList" :top-methods-obj="topMethodsObj" :transferTitle="transferTitle" title="导出"
              @transferSend="exportSendHandler">
    </transfer>
  </el-container>
</template>

<script>
import {
  getAppConfigCategoryInfo,
  getAppConfigDetailsByID,
  addAppConf,
  updateAppConf,
  exportSysConf
} from "@/api/systemModel/systemConfig/api"
import basicOption from "@/util/basic-option";
import func from "@/util/func";

export default {
  name: "index"
  name: "index",
  data() {
    return {
      topMethodsObj: {
        select: true,
        all: true,
        page: false
      },
      transferTitle: ['未选择', '已选择'],
      leftRoleData: [],
      rightRoleData: [],
      editStatus: false,
      form: {
        name: "",
        desc: ""
      },
      addVisible: false,
      nodeRow: {},
      configLoading: false,
      configData: [],
      configOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: '名称',
            prop: 'name',
            sortable: true
          },
          {
            label: 'key',
            prop: 'key',
            sortable: true
          },
          {
            label: 'value',
            prop: 'value',
            overHidden: true,
            sortable: true
          },
          {
            label: '描述',
            overHidden: true,
            prop: 'desc',
          }
        ]
      },
      defaultData: [], // 顶层节点新增后赋值数组
      firstOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: '名称',
            prop: 'name',
            sortable: true
          },
          {
            label: '描述',
            prop: 'desc',
          }
        ]
      },
      refresh: Math.random(),
      treeOption: {
        height: 'auto',
        menu: false,
        addBtn: false,
        defaultExpandAll: true,
        props: {
          label: 'name',
          value: 'id',
          children: 'children',
        },
      },
      treeData: [
        {
          name: '系统配置分类',
          id: 'firstNode',
          children: []
        }
      ],
      selectList: [],
      lastIndex: null
    }
  },
  created() {
    this.getTreeList();
  },
  methods: {
    // 左侧树查询
    getTreeList(val) {
      getAppConfigCategoryInfo().then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.treeData[0].children = data;
          if (val === 'save') {
            this.configData = data;
          }
        }
      })
    },

    // 树节点点击
    nodeClick(row) {
      console.log(row);
      this.nodeRow = row;
      if (row.id === 'firstNode') {
        this.configData = row.children;
      } else {
        this.configLoading = true;
        getAppConfigDetailsByID({clsId: row.id}).then(res => {
          if (res.data.code === 200) {
            const data = res.data.data;
            this.configData = data;
            this.configLoading = false;
          }
        })
      }
    },

    // 增加按钮
    addClickHandler() {
      if (func.isEmptyObject(this.nodeRow)) {
        this.$message.error('请选择一条节点进行添加！')
        return;
      }
      this.addVisible = true;
      this.editStatus = false;
    },

    // 新增对话框关闭
    addVisibleClose() {
      Object.keys(this.form).forEach(key => {
        this.form[key] = "";
      })
      this.addVisible = false;
    },

    // 保存
    addSaveClickHandler() {
      if (this.nodeRow.id === 'firstNode') {
        if (!this.form.name) {
          this.$message.error('名称不能为空！');
          return;
        }
      } else {
        if (!this.form.name) {
          this.$message.error('名称不能为空！');
          return;
        }
        if (!this.form.key) {
          this.$message.error('key值不能为空！');
          return;
        }
        if (!this.form.value) {
          this.$message.error('value值不能为空！');
          return;
        }
      }

      const params = this.nodeRow.id === 'firstNode' ? {
        appConfigDetailInfo: {
          name: this.form.name,
          desc: this.form.desc,
          id: this.editStatus ? this.form.id : null
        },
        isConfCategorys: true //true表示给顶层添加配置项分类
      } : {
        appConfigDetailInfo: {
          categoryId: this.nodeRow.id,
          name: this.form.name,
          desc: this.form.desc,
          key: this.form.key,
          value: this.form.value,
          id: this.editStatus ? this.form.id : null
        },
        isConfCategorys: false //true表示给顶层添加配置项分类
      }
      const saveApi = this.editStatus ? updateAppConf : addAppConf;
      saveApi(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.addVisibleClose();
          if (this.nodeRow.id === 'firstNode') {
            this.getTreeList('save');
          } else {
            this.configLoading = true;
            getAppConfigDetailsByID({clsId: this.nodeRow.id}).then(res => {
              if (res.data.code === 200) {
                const data = res.data.data;
                this.configData = data;
                this.configLoading = false;
              }
            })
          }
        }
      })
    },

    // 编辑按钮
    rowEditHandler(row) {
      this.addVisible = true;
      this.form = {...row};
      this.editStatus = true;
    },

    // 行删除
    rowDeleteHandler(row) {
      const params = {
        ids: row.id,
        isConfCategorys: this.nodeRow.id === 'firstNode' ? true : false
      }
      getAppConfigCategoryInfo(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success('删除成功');
          if (this.nodeRow.id === 'firstNode') {
            this.getTreeList('save');
          } else {
            this.configLoading = true;
            getAppConfigDetailsByID({clsId: this.nodeRow.id}).then(res => {
              if (res.data.code === 200) {
                const data = res.data.data;
                this.configData = data;
                this.configLoading = false;
              }
            })
          }
        }
      })
    },

    // 选择框
    selectChange(row) {
      this.selectList = row;
    },

    // 点击行
    rowClickHandler(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    // 多选删除
    delClickHandler() {
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      const params = {
        ids: this.selectList.map(item => {
          return item.id
        }).join(','),
        isConfCategorys: this.nodeRow.id === 'firstNode' ? true : false
      }
      getAppConfigCategoryInfo(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message.success('删除成功');
          if (this.nodeRow.id === 'firstNode') {
            this.getTreeList('save');
          } else {
            this.configLoading = true;
            getAppConfigDetailsByID({clsId: this.nodeRow.id}).then(res => {
              if (res.data.code === 200) {
                const data = res.data.data;
                this.configData = data;
                this.configLoading = false;
              }
            })
          }
        }
      })
    },

    // 导出按钮
    exportClickHandler() {
      if (func.isEmptyObject(this.nodeRow)) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.leftRoleData = this.nodeRow.id === 'firstNode' ? [
        {
          name: '名称',
          oid: 'name'
        },
        {
          name: '描述',
          oid: 'desc'
        }
      ] : [
        {
          name: '名称',
          oid: 'name'
        },
        {
          name: 'key',
          oid: 'key'
        },
        {
          name: 'value',
          oid: 'value'
        },
        {
          name: '描述',
          oid: 'desc'
        }
      ]
      this.$refs.transfer.visible = true;
    },

    // 导出保存
    exportSendHandler(row, index) {
      console.log(row, index);
      const params = {
        expType: index === 0 ? 'select' : index === 1 ? 'all' : '',
        expAttrNames: row,
        selectDataIdentify: index === 0 ? this.selectList.map(item => {
          return item.id
        }) : null,
        conditionMap: {
          "isExpAppConfDetail": this.nodeRow.id === 'firstNode' ? false : true,
          "clsId": this.nodeRow.id !== 'firstNode' ? this.nodeRow.id : null
        }
      }
      exportSysConf(params).then(res => {
        func.downloadFileByBlobHandler(res);
        this.$message.success('导出成功');
      }).catch(err => {
        this.$message.error(err);
      })
    }
  }
}
</script>