Source/UBCS-WEB/src/views/integration/systemInfo.vue

@@ -1,235 +1,358 @@
<template>
    <basic-container>
        <avue-crud ref="crud" :table-loading="loading" :data="data" :option="option" :page.sync="page" :search.sync="search"
            @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete" @row-update="handleEdit"
            @refresh-change="handleRefresh" @size-change="handleSizePage" @current-change="handleCurrentPage"
            @selection-change="selectionChange" @row-click="handleRowClick">
            <template slot="menuLeft">
                <!-- <el-button icon="el-icon-search" size="small" type="primary" @click="handleStatus">查 询
                </el-button> -->
                <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">删 除
                </el-button>
            </template>
            <template slot="search" slot-scope="{row,size}">
                <el-select v-model="selectValue" size="small" @change="handleSelect">
                    <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input :placeholder="`请输入${selectValue === 'id' ? '系统编号' : '系统名称'}并按回车查询`" :size="size"
                    style="width:300px;margin-left: 10px;" v-model="search[selectValue]" clearable
                    @keyup.enter.native="handleEnter" @clear="handleClear"></el-input>
            </template>
        </avue-crud>
    </basic-container>
  <basic-container>
    <avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :search.sync="search" :table-loading="loading"
               @on-load="getDataList" @row-save="handleSave" @row-del="handleDelete" @row-update="handleEdit"
               @refresh-change="handleRefresh" @size-change="handleSizePage" @current-change="handleCurrentPage"
               @selection-change="selectionChange" @row-click="handleRowClick">
      <template slot="menuLeft">
        <!-- <el-button icon="el-icon-search" size="small" type="primary" @click="handleStatus">查 询
        </el-button> -->
        <el-button icon="el-icon-delete" size="small" type="danger" @click="handleDeleteByIds">删 除
        </el-button>
      </template>
      <template slot="search" slot-scope="{row,size}">
        <el-select v-model="selectValue" size="small" @change="handleSelect">
          <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="search[selectValue]" :placeholder="`请输入${selectValue === 'id' ? '系统编号' : '系统名称'}并按回车查询`"
                  :size="size" clearable style="width:300px;margin-left: 10px;"
                  @clear="handleClear" @keyup.enter.native="handleEnter"></el-input>
      </template>
      <template #menu="{row,index,size}">
        <el-button icon="el-icon-menu" size="small" type="text" @click="classifyHandler(row)">分类授权</el-button>

      </template>
    </avue-crud>
    <el-dialog :visible.sync="dialogVisible" append-to-body class="avue-dialog avue-dialog--top" title="分类授权"
               top="-50px">

      <el-row>
        <el-col :span="10">
          <avue-tree ref="tree"
                     v-model="TreeForm"
                     :data="TreeData"
                     :option="TreeOption"
                     @check-change="checkChange">
          </avue-tree>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer" style="height: 50px;line-height: 50px">
        <el-button icon="el-icon-plus" size="small" type="primary" @click="empower">授 权</el-button>
        <el-button icon="el-icon-close" size="small" type="danger">重 置</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>
<script>
import { getSysInfoList, sysInfoAdd, sysInfoEdit, sysInfoDel } from '@/api/integration/sysInfo.js'
export default {
    data() {
        return {
            loading: false,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            selectOption: [{
                value: 'id',
                label: '系统编号'
            }, {
                value: 'name',
                label: '系统名称'
            }],
            selectValue: 'id',
            search: {},
            delIds: [],
            data: [],
            option: {
                height: "auto",
              tip:false,
                border: true,
                align: 'center',
                menuAlign: 'center',
                index: true,
                searchMenuSpan: 8,
                searchBtn: false,
                emptyBtn: false,
                columnBtn: false,
                defaultSort: {
                    prop: 'id,name',
                    order: 'descending'
                },
                selection: true,
                column: [
                    {
                        label: '系统编号',
                        prop: 'id',
                        sortable: true,
                        rules: [{
                            required: true,
                            message: '系统编号不能为空',
                            trigger: 'blur'
                        }],
                        // maxlength: 30,    //字数限制
                    }, {
                        label: '系统名称',
                        prop: 'name',
                        sortable: true,
                        rules: [{
                            required: true,
                            message: '系统名称不能为空',
                            trigger: 'blur'
                        }],
                        // maxlength: 30,    //字数限制
                    },
                    {
                        label: '系统描述',
                        prop: 'description',
                        type: 'textarea'
                    }
                ]
            },
        }
    },
    methods: {
        // 获取列表
        async getDataList() {
            this.loading = true
            console.log(this.search)
            const { pageSize, currentPage } = this.page
            let param = { size: pageSize, current: currentPage }
            this.search = Object.keys(this.search)
                .filter((key) => this.search[key] !== null && this.search[key] !== undefined && this.search[key] !== "")
                .reduce((acc, key) => ({ ...acc, [key]: this.search[key] }), {});
            const response = await getSysInfoList({ ...param, ...this.search })
            if (response.status === 200) {
                console.log(response)
                this.loading = false
                const data = response.data.data
                this.data = data.records
                this.page.total = data.total
            } else this.loading = false
        },
        // 新增
        async handleSave(row, done, loading) {
            try {
                const response = await sysInfoAdd(row)
                if (response.status === 200) {
                    this.$message({
                        type: 'success',
                        message: '新增数据成功！'
                    })
                    done(row)
                    // this.$refs.crud.refreshTable()
                    // this.getDataList()
                }
            } catch {
                loading()
            }
        },
        // 编辑
        async handleEdit(row, index, done, loading) {
            try {
                const { oid, id, name, description } = row
                const response = await sysInfoEdit({ oid, id, name, description })
                if (response.status === 200) {
                    loading()
                    this.$message({
                        type: 'success',
                        message: '修改数据成功！'
                    })
                    done(row)
                }
            } catch {
                loading()
            }
        },
        // 删除单条
        handleDelete(row) {
            const { oid } = row
            this.deleteSysInfo({ oids: oid })
        },
        // 多条数据删除
        handleDeleteByIds() {
            const { oids } = this.delIds
            if (this.$utilFunc.isEmpty(oids)) {
                this.$message({
                    type: "error",
                    message: "请至少选择一条数据!"
                })
            } else {
                this.deleteSysInfo(this.delIds)
            }
        },
        // 删除接口
        deleteSysInfo(param) {
            this.$confirm('是否确定删除选择的集成系统?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const response = await sysInfoDel(param)
                if (response.status === 200) {
                    console.log(response)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getDataList()
                }
            })
        },
        // 选择框内容选择后
        handleSelect(event) {
            this.selectValue = event
            if (this.selectValue === 'id') {
                this.search['name'] = ''
                delete this.search['name']
            } else {
                this.search['id'] = ''
                delete this.search['id']
            }
        },
        // enter搜索
        handleEnter() {
            if (this.search[this.selectValue] === '') return
            else this.getDataList()
import {
  getSysInfoList,
  sysInfoAdd,
  sysInfoEdit,
  sysInfoDel,
  sysInfoTree,
  batchAddSave
} from '@/api/integration/sysInfo.js'

export default {
  data() {
    return {
      checkAll: {},
      ParentList: [],
      //避免缓存
      reload: Math.random(),
      TreeLoading: false,
      TreeOption: {
        defaultExpandAll: false,
        multiple: true,
        addBtn: false,
        filter: false
      },
      TreeData: [],
      TreeForm: {},
      loading: false,
      dialogVisible: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      selectOption: [{
        value: 'id',
        label: '系统编号'
      }, {
        value: 'name',
        label: '系统名称'
      }],
      selectValue: 'id',
      search: {},
      delIds: [],
      data: [],
      option: {
        height: "auto",
        tip: false,
        border: true,
        align: 'center',
        menuAlign: 'center',
        index: true,
        searchMenuSpan: 8,
        searchBtn: false,
        emptyBtn: false,
        columnBtn: false,
        defaultSort: {
          prop: 'id,name',
          order: 'descending'
        },
        // 输入框清空
        handleClear() {
            this.search = {}
            this.getDataList()
        },
        // 刷新按钮
        handleRefresh() {
            this.getDataList()
        },
        handleSizePage(event) {
            this.page.pageSize = event
        },
        handleCurrentPage(event) {
            this.page.currentPage = event
        },
        // 点击选择
        handleRowClick(row) {
            this.$refs.crud.toggleRowSelection(row, true)
        },
        // 多选
        selectionChange(list) {
            console.log(list)
            let newData = list.map(item => {
                const { oid } = item
                return oid
            })
            this.delIds = { oids: newData.toString() }
            console.log(this.delIds)
        },
        selection: true,
        column: [
          {
            label: '系统编号',
            prop: 'id',
            sortable: true,
            rules: [{
              required: true,
              message: '系统编号不能为空',
              trigger: 'blur'
            }],
            // maxlength: 30,    //字数限制
          }, {
            label: '系统名称',
            prop: 'name',
            sortable: true,
            rules: [{
              required: true,
              message: '系统名称不能为空',
              trigger: 'blur'
            }],
            // maxlength: 30,    //字数限制
          },
          {
            label: '系统描述',
            prop: 'description',
            type: 'textarea'
          }
        ]
      },
    }
  },
  created() {
  },
  methods: {
    empower() {
      batchAddSave(this.checkAll.oid, this.checkAll.id, this.ParentList).then(res => {
        console.log(res)
      })
    },
    //分类授权多选回调
    checkChange(row, checked) {
      if (checked) {
        if (!row.parentId && row.children) {
          const parentRecord = {
            oid: row.oid,
            classifyId: row.attributes.classifyId,
            classifyOid: row.attributes.classifyOid,
            classParentOid: row.parentId,
          };
          this.ParentList.push(parentRecord);
          // 如果row的children不为空，继续循环children中的每个对象
          if (row.children && row.children.length > 0) {
            for (let child of row.children) {
              const childRecord = {
                oid: child.oid,
                classifyId: child.attributes.classifyId,
                classifyOid: child.attributes.classifyOid,
                classParentOid: child.parentId,
              };
              this.ParentList.push(childRecord);
              // 如果子对象的children不为空，继续循环获取数据
              if (child.children && child.children.length > 0) {
                for (let subChild of child.children) {
                  const subRecord = {
                    oid: subChild.oid,
                    classifyId: subChild.attributes.classifyId,
                    classifyOid: subChild.attributes.classifyOid,
                    classParentOid: subChild.parentId,
                  };
                  this.ParentList.push(subRecord);
                }
              }
            }
          }
          console.log(this.ParentList);
        }
      } else {
        this.ParentList = this.ParentList.filter(res => res.classifyId !== row.classifyId);
        console.log(this.ParentList);
      }
    },
    //分类授权
    classifyHandler(row) {
      this.loading = true;
      this.checkAll = row
      sysInfoTree({systemOid: row.oid, systemId: row.id}).then(res => {
        this.TreeData = res.data;
        this.ModifyProperties(this.TreeData, 'text', 'label');
        // 根据 this.TreeData 的长度计算延迟时间
        const delayTime = this.TreeData.length * 1;
        setTimeout(() => {
          this.loading = false;
          this.reload = Math.random()
          this.dialogVisible = true;
        }, delayTime);
      });
    },
    //定义一个修改数据属性名的方法
    ModifyProperties(obj, oldName, newName) {
      for (let key in obj) {
        if (key === oldName) {
          obj[newName] = obj[key];
          delete obj[key];
        }
        if (typeof obj[key] === 'object') {
          this.ModifyProperties(obj[key], oldName, newName);
        }
      }
    },
    async getDataList() {
      this.loading = true;
      console.log(this.search);
      const {pageSize, currentPage} = this.page;
      const conditions = {};
      if (Object.keys(this.search).length > 0) {
        for (const key in this.search) {
          if (this.search[key]) {
            conditions[`conditionMap[${key}_like]`] = this.search[key];
          }
        }
      }
      const response = await getSysInfoList(pageSize, currentPage, conditions);
      if (response.status === 200) {
        console.log(response);
        this.loading = false;
        const data = response.data.data;
        this.data = data.records;
        this.page.total = data.total;
      } else {
        this.loading = false;
      }
    },
    // 新增
    async handleSave(row, done, loading) {
      try {
        const response = await sysInfoAdd(row)
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '新增数据成功！'
          })
          done(row)
          // this.$refs.crud.refreshTable()
          // this.getDataList()
        }
      } catch {
        loading()
      }
    },
    // 编辑
    async handleEdit(row, index, done, loading) {
      try {
        const {oid, id, name, description} = row
        const response = await sysInfoEdit({oid, id, name, description})
        if (response.status === 200) {
          loading()
          this.$message({
            type: 'success',
            message: '修改数据成功！'
          })
          done(row)
        }
      } catch {
        loading()
      }
    },
    // 删除单条
    handleDelete(row) {
      const {oid} = row
      this.deleteSysInfo({oids: oid})
    },
    // 多条数据删除
    handleDeleteByIds() {
      const {oids} = this.delIds
      if (this.$utilFunc.isEmpty(oids)) {
        this.$message({
          type: "error",
          message: "请至少选择一条数据!"
        })
      } else {
        this.deleteSysInfo(this.delIds)
      }
    },
    // 删除接口
    deleteSysInfo(param) {
      this.$confirm('是否确定删除选择的集成系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const response = await sysInfoDel(param)
        if (response.status === 200) {
          console.log(response)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getDataList()
        }
      })
    },
    // 选择框内容选择后
    handleSelect(event) {
      this.selectValue = event
      if (this.selectValue === 'id') {
        this.search['name'] = ''
        delete this.search['name']
      } else {
        this.search['id'] = ''
        delete this.search['id']
      }
    },
    // enter搜索
    handleEnter() {
      this.getDataList()
    },
    // 输入框清空
    handleClear() {
      this.search = {}
      this.getDataList()
    },
    // 刷新按钮
    handleRefresh() {
      this.getDataList()
    },
    handleSizePage(event) {
      this.page.pageSize = event
    },
    handleCurrentPage(event) {
      this.page.currentPage = event
    },
    // 点击选择
    handleRowClick(row) {
      this.$refs.crud.toggleRowSelection(row, true)
    },
    // 多选
    selectionChange(list) {
      let newData = list.map(item => {
        const {oid} = item
        return oid
      })
      this.delIds = {oids: newData.toString()}
      // console.log(this.delIds)
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep(.avue-crud .el-select) {
    width: 100px !important;
  width: 100px !important;
}
</style>