联锁基础库管理

src/views/module_interLock/baseInterLock/BaseInterLockList.vue

@@ -0,0 +1,381 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="类型">
+              <j-dict-select-tag placeholder="请选择类型" v-model="queryParam.interlockType" dictCode="interlock_type"/>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <a-form-item label="名称">
+              <a-input placeholder="请输入名称" v-model="queryParam.interlockName"></a-input>
+            </a-form-item>
+          </a-col>
+          <!-- <template v-if="toggleSearchStatus">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
+              <a-form-item label="是否有子节点">
+                <j-dict-select-tag placeholder="请选择是否有子节点" v-model="queryParam.hasChild" dictCode="yn"/>
+              </a-form-item>
+            </a-col>
+          </template> -->
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a> -->
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('联锁基础表')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      <!-- 高级查询区域 -->
+      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+      </a-dropdown>
+    </div>
+
+    <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        rowKey="id"
+        class="j-table-force-nowrap"
+        :scroll="{x:true}"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :expandedRowKeys="expandedRowKeys"
+        @change="handleTableChange"
+        @expand="handleExpand"
+        v-bind="tableProps">
+
+        <template slot="imgSlot" slot-scope="text,record">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
+          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+        </template>
+        <template slot="fileSlot" slot-scope="text">
+          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+          <a-button
+            v-else
+            :ghost="true"
+            type="primary"
+            icon="download"
+            size="small"
+            @click="downloadFile(text)">
+            下载
+          </a-button>
+        </template>
+
+        <span slot="action" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+
+          <a-divider type="vertical" />
+          <a-dropdown>
+            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+            <a-menu slot="overlay">
+              <a-menu-item>
+                <a @click="handleAddChild(record)">添加下级</a>
+              </a-menu-item>
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteNode(record.id)" placement="topLeft">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+      </a-table>
+    </div>
+
+    <base-InterLock-modal ref="modalForm" @ok="modalFormOk"></base-InterLock-modal>
+  </a-card>
+</template>
+
+<script>
+
+  import { getAction, deleteAction } from '@/api/manage'
+  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import BaseInterLockModal from './modules/BaseInterLockModal'
+  import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
+  import { filterObj } from '@/utils/util';
+
+  export default {
+    name: "BaseInterLockList",
+    mixins:[JeecgListMixin],
+    components: {
+      BaseInterLockModal
+    },
+    data () {
+      return {
+        description: '联锁基础表管理页面',
+        // 表头
+        columns: [
+          {
+            title:'名称',
+            align:"left",
+            dataIndex: 'interlockName'
+          },
+          {
+            title:'类型',
+            align:"left",
+            dataIndex: 'interlockType_dictText'
+          },
+          {
+            title: '操作',
+            dataIndex: 'action',
+            align:"center",
+            fixed:"right",
+            width:147,
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        url: {
+          list: "/base/interlockBase/rootList",
+          childList: "/base/interlockBase/childList",
+          getChildListBatch: "/base/interlockBase/getChildListBatch",
+          delete: "/base/interlockBase/delete",
+          deleteBatch: "/base/interlockBase/deleteBatch",
+          exportXlsUrl: "/base/interlockBase/exportXls",
+          importExcelUrl: "base/interlockBase/importExcel",
+        },
+        expandedRowKeys:[],
+        hasChildrenField:"hasChild",
+        pidField:"pid",
+        dictOptions: {},
+        loadParent: false,
+        superFieldList:[],
+      }
+    },
+    created() {
+      this.getSuperFieldList();
+    },
+    computed: {
+      importExcelUrl(){
+        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+      },
+      tableProps() {
+        let _this = this
+        return {
+          // 列表项是否可选择
+          rowSelection: {
+            selectedRowKeys: _this.selectedRowKeys,
+            onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
+          }
+        }
+      }
+    },
+    methods: {
+      loadData(arg){
+        if(arg==1){
+          this.ipagination.current=1
+        }
+        this.loading = true
+        let params = this.getQueryParams()
+        params.hasQuery = 'true'
+        getAction(this.url.list,params).then(res=>{
+          if(res.success){
+            let result = res.result
+            if(Number(result.total)>0){
+              this.ipagination.total = Number(result.total)
+              this.dataSource = this.getDataByResult(res.result.records)
+              return this.loadDataByExpandedRows(this.dataSource)
+            }else{
+              this.ipagination.total=0
+              this.dataSource=[]
+            }
+          }else{
+            this.$message.warning(res.message)
+          }
+        }).finally(()=>{
+          this.loading = false
+        })
+      },
+      // 根据已展开的行查询数据（用于保存后刷新时异步加载子级的数据）
+      loadDataByExpandedRows(dataList) {
+        if (this.expandedRowKeys.length > 0) {
+          return getAction(this.url.getChildListBatch,{ parentIds: this.expandedRowKeys.join(',') }).then(res=>{
+            if (res.success && res.result.records.length>0) {
+              //已展开的数据批量子节点
+              let records = res.result.records
+              const listMap = new Map();
+              for (let item of records) {
+                let pid = item[this.pidField];
+                if (this.expandedRowKeys.join(',').includes(pid)) {
+                 let mapList = listMap.get(pid);
+                  if (mapList == null) {
+                    mapList = [];
+                  }
+                  mapList.push(item);
+                  listMap.set(pid, mapList);
+                }
+              }
+              let childrenMap = listMap;
+              let fn = (list) => {
+                if(list) {
+                  list.forEach(data => {
+                    if (this.expandedRowKeys.includes(data.id)) {
+                      data.children = this.getDataByResult(childrenMap.get(data.id))
+                      fn(data.children)
+                    }
+                  })
+                }
+              }
+              fn(dataList)
+            }
+          })
+        } else {
+          return Promise.resolve()
+        }
+      },
+      getQueryParams(arg) {
+        //获取查询条件
+        let sqp = {}
+        let param = {}
+        if(this.superQueryParams){
+          sqp['superQueryParams']=encodeURI(this.superQueryParams)
+          sqp['superQueryMatchType'] = this.superQueryMatchType
+        }
+        if(arg){
+          param = Object.assign(sqp, this.isorter ,this.filters);
+        }else{
+          param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
+        }
+        if(JSON.stringify(this.queryParam) === "{}" || arg){
+          param.hasQuery = 'false'
+        }else{
+          param.hasQuery = 'true'
+        }
+        param.field = this.getQueryField();
+        param.pageNo = this.ipagination.current;
+        param.pageSize = this.ipagination.pageSize;
+        return filterObj(param);
+      },
+      searchReset() {
+        //重置
+        this.expandedRowKeys = []
+        this.queryParam = {}
+        this.loadData(1);
+      },
+      getDataByResult(result){
+        if(result){
+          return result.map(item=>{
+            //判断是否标记了带有子节点
+            if(item[this.hasChildrenField]=='1'){
+              let loadChild = { id: item.id+'_loadChild', name: 'loading...', isLoading: true }
+              item.children = [loadChild]
+            }
+            return item
+          })
+        }
+      },
+      handleExpand(expanded, record){
+        // 判断是否是展开状态
+        if (expanded) {
+          this.expandedRowKeys.push(record.id)
+          if (record.children.length>0 && record.children[0].isLoading === true) {
+            let params = this.getQueryParams(1);//查询条件
+            params[this.pidField] = record.id
+            params.hasQuery = 'false'
+            params.superQueryParams=""
+            getAction(this.url.childList,params).then((res)=>{
+              if(res.success){
+                if(res.result.records){
+                  record.children = this.getDataByResult(res.result.records)
+                  this.dataSource = [...this.dataSource]
+                }else{
+                  record.children=''
+                  record.hasChildrenField='0'
+                }
+              }else{
+                this.$message.warning(res.message)
+              }
+            })
+          }
+        }else{
+          let keyIndex = this.expandedRowKeys.indexOf(record.id)
+          if(keyIndex>=0){
+            this.expandedRowKeys.splice(keyIndex, 1);
+          }
+        }
+      },
+      handleAddChild(record){
+        this.loadParent = true
+        let obj = {}
+        obj[this.pidField] = record['id']
+        this.$refs.modalForm.add(obj);
+      },
+      handleDeleteNode(id) {
+        if(!this.url.delete){
+          this.$message.error("请设置url.delete属性!")
+          return
+        }
+        var that = this;
+        deleteAction(that.url.delete, {id: id}).then((res) => {
+          if (res.success) {
+             that.loadData(1)
+          } else {
+            that.$message.warning(res.message);
+          }
+        });
+      },
+      batchDel(){
+        if(this.selectedRowKeys.length<=0){
+          this.$message.warning('请选择一条记录！');
+          return false;
+        }else{
+          let ids = "";
+          let that = this;
+          that.selectedRowKeys.forEach(function(val) {
+            ids+=val+",";
+          });
+          that.$confirm({
+            title:"确认删除",
+            content:"是否删除选中数据?",
+            onOk: function(){
+              that.handleDeleteNode(ids)
+              that.onClearSelected();
+            }
+          });
+        }
+      },
+      getSuperFieldList(){
+        let fieldList=[];
+        fieldList.push({type:'string',value:'interlockType',text:'类型',dictCode:'interlock_type'})
+        fieldList.push({type:'string',value:'interlockName',text:'名称',dictCode:''})
+        fieldList.push({type:'string',value:'pid',text:'父级节点',dictCode:''})
+        fieldList.push({type:'string',value:'hasChild',text:'是否有子节点',dictCode:'yn'})
+        this.superFieldList = fieldList
+      }
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less';
+</style>

src/views/module_interLock/baseInterLock/modules/BaseInterLockModal.vue

@@ -0,0 +1,156 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
+        <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockType">
+          <j-dict-select-tag type="list" v-model="model.interlockType"  dictCode="interlock_type" placeholder="请选择类型" />
+        </a-form-model-item>
+        <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="interlockName">
+          <a-input v-model="model.interlockName" placeholder="请输入名称" ></a-input>
+        </a-form-model-item>
+        <a-form-model-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pid">
+          <j-tree-select
+            ref="treeSelect"
+            placeholder="请选择父级节点"
+            v-model="model.pid"
+            dict="interlock_base,interlock_name,id"
+            pidField="pid"
+            pidValue="0"
+            hasChildField="has_child"
+            >
+          </j-tree-select>
+        </a-form-model-item>
+        
+      </a-form-model>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+
+  import { httpAction } from '@/api/manage'
+  import { validateDuplicateValue } from '@/utils/util'
+  export default {
+    name: "InterlockBaseModal",
+    components: { 
+    },
+    data () {
+      return {
+        title:"操作",
+        width:800,
+        visible: false,
+        model:{
+         },
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+
+        confirmLoading: false,
+        validatorRules: {
+        },
+        url: {
+          add: "/base/interlockBase/add",
+          edit: "/base/interlockBase/edit",
+        },
+        expandedRowKeys:[],
+        pidField:"pid"
+     
+      }
+    },
+    created () {
+       //备份model原始值
+       this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    },
+    methods: {
+      add (obj) {
+        this.modelDefault.pid=''
+        this.edit(Object.assign(this.modelDefault , obj));
+      },
+      edit (record) {
+        this.model = Object.assign({}, record);
+        this.visible = true;
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+        this.$refs.form.clearValidate()
+      },
+      handleOk () {
+        const that = this;
+        // 触发表单验证
+       this.$refs.form.validate(valid => {
+          if (valid) {
+            that.confirmLoading = true;
+            let httpurl = '';
+            let method = '';
+            if(!this.model.id){
+              httpurl+=this.url.add;
+              method = 'post';
+            }else{
+              httpurl+=this.url.edit;
+               method = 'put';
+            }
+             if(this.model.id && this.model.id === this.model[this.pidField]){
+              that.$message.warning("父级节点不能选择自己");
+              that.confirmLoading = false;
+              return;
+            }
+            httpAction(httpurl,this.model,method).then((res)=>{
+              if(res.success){
+                that.$message.success(res.message);
+                this.$emit('ok');
+              }else{
+                that.$message.warning(res.message);
+              }
+            }).finally(() => {
+              that.confirmLoading = false;
+              that.close();
+            })
+          }else{
+             return false
+          }
+        })
+      },
+      handleCancel () {
+        this.close()
+      },
+      submitSuccess(formData,flag){
+        if(!formData.id){
+          let treeData = this.$refs.treeSelect.getCurrTreeData()
+          this.expandedRowKeys=[]
+          this.getExpandKeysByPid(formData[this.pidField],treeData,treeData)
+          this.$emit('ok',formData,this.expandedRowKeys.reverse());
+        }else{
+          this.$emit('ok',formData,flag);
+        }
+      },
+      getExpandKeysByPid(pid,arr,all){
+        if(pid && arr && arr.length>0){
+          for(let i=0;i<arr.length;i++){
+            if(arr[i].key==pid){
+              this.expandedRowKeys.push(arr[i].key)
+              this.getExpandKeysByPid(arr[i]['parentId'],all,all)
+            }else{
+              this.getExpandKeysByPid(pid,arr[i].children,all)
+            }
+          }
+        }
+      }
+      
+      
+    }
+  }
+</script>