样品分类树状结构

itdmWeb/src/views/module-iTDM/inventory/ItdmSampleClassificationList.vue

@@ -36,20 +36,18 @@
       <a-table
         ref="table"
         size="middle"
-        :scroll="{x:true}"
-        bordered
         rowKey="id"
+        class="j-table-force-nowrap"
+        :scroll="{x:true}"
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
         :loading="loading"
-        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        class="j-table-force-nowrap"
-        @change="handleTableChange">
+        :expandedRowKeys="expandedRowKeys"
+        @change="handleTableChange"
+        @expand="handleExpand"
+        v-bind="tableProps">
 
-        <template slot="htmlSlot" slot-scope="text">
-          <div v-html="text"></div>
-        </template>
         <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;"/>
@@ -75,10 +73,10 @@
             <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
             <a-menu slot="overlay">
               <a-menu-item>
-                <a @click="handleDetail(record)">详情</a>
+                <a @click="handleAddChild(record)">添加下级</a>
               </a-menu-item>
               <a-menu-item>
-                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteNode(record.id)" placement="topLeft">
                   <a>删除</a>
                 </a-popconfirm>
               </a-menu-item>
@@ -89,21 +87,21 @@
       </a-table>
     </div>
 
-    <itdm-sample-classification-modal ref="modalForm" @ok="modalFormOk"></itdm-sample-classification-modal>
+    <itdmSampleClassification-modal ref="modalForm" @ok="modalFormOk"></itdmSampleClassification-modal>
   </a-card>
 </template>
 
 <script>
 
-  import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
+  import { getAction, deleteAction } from '@/api/manage'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import ItdmSampleClassificationModal from './modules/ItdmSampleClassificationModal'
   import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
+  import { filterObj } from '@/utils/util';
 
   export default {
-    name: 'ItdmSampleClassificationList',
-    mixins:[JeecgListMixin, mixinDevice],
+    name: "ItdmSampleClassificationList",
+    mixins:[JeecgListMixin],
     components: {
       ItdmSampleClassificationModal
     },
@@ -113,33 +111,18 @@
         // 表头
         columns: [
           {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
             title:'名称',
-            align:"center",
+            align:"left",
             dataIndex: 'name'
           },
           {
-            title:'上级',
-            align:"center",
-            dataIndex: 'pid_dictText'
-          },
-          {
             title:'状态',
-            align:"center",
+            align:"left",
             dataIndex: 'status_dictText'
           },
           {
             title:'备注',
-            align:"center",
+            align:"left",
             dataIndex: 'remark'
           },
           {
@@ -148,36 +131,222 @@
             align:"center",
             fixed:"right",
             width:147,
-            scopedSlots: { customRender: 'action' }
+            scopedSlots: { customRender: 'action' },
           }
         ],
         url: {
-          list: "/inventory/itdmSampleClassification/list",
+          list: "/inventory/itdmSampleClassification/rootList",
+          childList: "/inventory/itdmSampleClassification/childList",
+          getChildListBatch: "/inventory/itdmSampleClassification/getChildListBatch",
           delete: "/inventory/itdmSampleClassification/delete",
           deleteBatch: "/inventory/itdmSampleClassification/deleteBatch",
           exportXlsUrl: "/inventory/itdmSampleClassification/exportXls",
           importExcelUrl: "inventory/itdmSampleClassification/importExcel",
-
         },
-        dictOptions:{},
+        expandedRowKeys:[],
+        hasChildrenField:"hasChild",
+        pidField:"pid",
+        dictOptions: {},
+        loadParent: false,
         superFieldList:[],
       }
     },
     created() {
-    this.getSuperFieldList();
+      this.getSuperFieldList();
     },
     computed: {
-      importExcelUrl: function(){
+      importExcelUrl(){
         return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
       },
+      tableProps() {
+        let _this = this
+        return {
+          // 列表项是否可选择
+          rowSelection: {
+            selectedRowKeys: _this.selectedRowKeys,
+            onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
+          }
+        }
+      }
     },
     methods: {
-      initDictConfig(){
+      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:'name',text:'名称',dictCode:''})
-        fieldList.push({type:'string',value:'pid',text:'上级id',dictCode:"itdm_sample_classification,name,id"})
+        fieldList.push({type:'string',value:'pid',text:'上级',dictCode:"itdm_sample_classification,name,id"})
         fieldList.push({type:'string',value:'status',text:'状态',dictCode:'sample_type_status'})
         fieldList.push({type:'string',value:'remark',text:'备注',dictCode:''})
         this.superFieldList = fieldList

itdmWeb/src/views/module-iTDM/inventory/modules/ItdmSampleClassificationForm.vue

@@ -1,119 +0,0 @@
-<template>
-  <a-spin :spinning="confirmLoading">
-    <j-form-container :disabled="formDisabled">
-      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
-        <a-row>
-          <a-col :span="24">
-            <a-form-model-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
-              <a-input v-model="model.name" placeholder="请输入分类名称"  ></a-input>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-model-item label="上级分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pid">
-              <j-dict-select-tag v-model="model.pid" placeholder="请选择上级分类" dictCode="itdm_sample_classification,name,id" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
-              <j-dict-select-tag type="list" v-model="model.status" dictCode="sample_type_status" placeholder="请选择状态" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="24">
-            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
-              <a-input v-model="model.remark" placeholder="请输入备注"  ></a-input>
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-      </a-form-model>
-    </j-form-container>
-  </a-spin>
-</template>
-
-<script>
-
-  import { httpAction, getAction } from '@/api/manage'
-  import { validateDuplicateValue } from '@/utils/util'
-
-  export default {
-    name: 'ItdmSampleClassificationForm',
-    components: {
-    },
-    props: {
-      //表单禁用
-      disabled: {
-        type: Boolean,
-        default: false,
-        required: false
-      }
-    },
-    data () {
-      return {
-        model:{
-         },
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        confirmLoading: false,
-        validatorRules: {
-        },
-        url: {
-          add: "/inventory/itdmSampleClassification/add",
-          edit: "/inventory/itdmSampleClassification/edit",
-          queryById: "/inventory/itdmSampleClassification/queryById"
-        }
-      }
-    },
-    computed: {
-      formDisabled(){
-        return this.disabled
-      },
-    },
-    created () {
-       //备份model原始值
-      this.modelDefault = JSON.parse(JSON.stringify(this.model));
-    },
-    methods: {
-      add () {
-        this.edit(this.modelDefault);
-      },
-      edit (record) {
-        this.model = Object.assign({}, record);
-        this.visible = true;
-      },
-      submitForm () {
-        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';
-            }
-            httpAction(httpurl,this.model,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.confirmLoading = false;
-            })
-          }
-
-        })
-      },
-    }
-  }
-</script>

itdmWeb/src/views/module-iTDM/inventory/modules/ItdmSampleClassificationModal.Style#Drawer.vue

@@ -1,84 +0,0 @@
-<template>
-  <a-drawer
-    :title="title"
-    :width="width"
-    placement="right"
-    :closable="false"
-    @close="close"
-    destroyOnClose
-    :visible="visible">
-    <itdm-sample-classification-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></itdm-sample-classification-form>
-    <div class="drawer-footer">
-      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
-      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">提交</a-button>
-    </div>
-  </a-drawer>
-</template>
-
-<script>
-
-  import ItdmSampleClassificationForm from './ItdmSampleClassificationForm'
-
-  export default {
-    name: 'ItdmSampleClassificationModal',
-    components: {
-      ItdmSampleClassificationForm
-    },
-    data () {
-      return {
-        title:"操作",
-        width:800,
-        visible: false,
-        disableSubmit: false
-      }
-    },
-    methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
-      },
-      edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        });
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
-      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      handleCancel () {
-        this.close()
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-/** Button按钮间距 */
-  .ant-btn {
-    margin-left: 30px;
-    margin-bottom: 30px;
-    float: right;
-  }
-  .drawer-footer{
-    position: absolute;
-    bottom: -8px;
-    width: 100%;
-    border-top: 1px solid #e8e8e8;
-    padding: 10px 16px;
-    text-align: right;
-    left: 0;
-    background: #fff;
-    border-radius: 0 0 2px 2px;
-  }
-</style>

itdmWeb/src/views/module-iTDM/inventory/modules/ItdmSampleClassificationModal.vue

@@ -3,58 +3,157 @@
     :title="title"
     :width="width"
     :visible="visible"
+    :confirmLoading="confirmLoading"
     switchFullscreen
     @ok="handleOk"
-    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
     @cancel="handleCancel"
     cancelText="关闭">
-    <itdm-sample-classification-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></itdm-sample-classification-form>
+    <a-spin :spinning="confirmLoading">
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
+        <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
+          <a-input v-model="model.name" 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="itdm_sample_classification,name,id"
+            pidField="pid"
+            pidValue="0"
+            hasChildField="has_child"
+            >
+          </j-tree-select>
+        </a-form-model-item>
+        <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
+          <j-dict-select-tag type="list" v-model="model.status"  dictCode="sample_type_status" placeholder="请选择状态" />
+        </a-form-model-item>
+        <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
+          <a-input v-model="model.remark" placeholder="请输入备注" ></a-input>
+        </a-form-model-item>
+
+      </a-form-model>
+    </a-spin>
   </j-modal>
 </template>
 
 <script>
 
-  import ItdmSampleClassificationForm from './ItdmSampleClassificationForm'
+  import { httpAction } from '@/api/manage'
+  import { validateDuplicateValue } from '@/utils/util'
   export default {
-    name: 'ItdmSampleClassificationModal',
+    name: "ItdmSampleClassificationModal",
     components: {
-      ItdmSampleClassificationForm
     },
     data () {
       return {
-        title:'',
+        title:"操作",
         width:800,
         visible: false,
-        disableSubmit: false
+        model:{
+         },
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+
+        confirmLoading: false,
+        validatorRules: {
+        },
+        url: {
+          add: "/inventory/itdmSampleClassification/add",
+          edit: "/inventory/itdmSampleClassification/edit",
+        },
+        expandedRowKeys:[],
+        pidField:"pid"
+
       }
     },
+    created () {
+       //备份model原始值
+       this.modelDefault = JSON.parse(JSON.stringify(this.model));
+    },
     methods: {
-      add () {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.add();
-        })
+      add (obj) {
+        this.modelDefault.pid=''
+        this.edit(Object.assign(this.modelDefault , obj));
       },
       edit (record) {
-        this.visible=true
-        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
-        })
+        this.model = Object.assign({}, record);
+        this.visible = true;
       },
       close () {
         this.$emit('close');
         this.visible = false;
+        this.$refs.form.clearValidate()
       },
       handleOk () {
-        this.$refs.realForm.submitForm();
-      },
-      submitCallback(){
-        this.$emit('ok');
-        this.visible = false;
+        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>