cuijian
2025-07-28 accebdce93486d3b4f26e55ffdea047549cce20c
src/views/mdc/base/modules/DepartList/DepartListContent/DepartList.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,622 @@
<template>
  <div class="device_list">
    <a-row>
        <a-col :md="leftColMd" :sm="24">
          <a-card :bordered="false">
            <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
            <div class="table-operator">
              <a-button @click="handleAddTier" type="primary" icon="plus">新增部门
              </a-button>
              <!--<a-button @click="handleAdd" type="primary" icon="plus">新增人员-->
              <!--</a-button>-->
              <!--<a-button @click="handleEdit" v-if="selectedRowKeys.length ==1" icon="edit">编辑-->
              <!--</a-button>-->
              <a-button @click="deviceSearch" v-if="selectedRowKeys.length ==1" type="primary" icon="search">选择设备
              </a-button>
              <!--<a-button @click="batchDelll" v-if="selectedRowKeys.length >0" icon="delete">删除-->
              <!--</a-button>-->
            </div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
              <i class="anticon anticon-info-circle ant-alert-icon">
              </i> å·²é€‰æ‹© <a><b>{{ selectedRowKeys.length }}</b></a>项
              <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>
            <!-- table区域-begin -->
            <div>
              <a-table ref="table" bordered size="middle" rowKey="id" :columns="columns"
                       :scroll="{x: 400}" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'radio'}"
                       @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
                <!--字符串超长截取省略号显示-->
                <span slot="num" slot-scope="text" style="font-weight: bold">
          <j-ellipsis :value="text" :length="8"/>
        </span>
                <span slot="name" slot-scope="text" style="font-weight: bold">
          <j-ellipsis :value="text" :length="8"/>
        </span>
                <span slot="model" slot-scope="text" style="font-weight: bold">
          <j-ellipsis :value="text" :length="8"/>
        </span>
              </a-table>
            </div>
            <!-- table区域-end -->
            <depart-model ref="modalForm" @ok="modalFormOk"></depart-model>
            <tier-model ref="tierModalForm" @ok="modalFormOk"></tier-model>
            <depart-list-seach-list ref="seachModalForm" @ok="modalFormOk"  @sendSelectionRows="getDeviceRows"></depart-list-seach-list>
          </a-card>
        </a-col>
        <a-col :md="rightColMd" :sm="24" v-if="selectedRowKeys.length == 1">
          <a-table
            ref="table2"
            bordered
            size="middle"
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource2"
            :pagination="ipagination2"
            :loading="loading2"
            @change="handleTableChange2">
             <span slot="action" slot-scope="text, record">
          <!--<a @click="handleEdit(record)">编辑</a>-->
          <!--<a-divider type="vertical"/>-->
          <a-popconfirm title="确定移除吗?" @confirm="() => handleDeleteZi(record.id)">
            <a>移除</a>
          </a-popconfirm>
        </span>
          </a-table>
        </a-col>
    </a-row>
  </div>
</template>
<script>
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {
    requestPut,
    deleteAction,
    getAction,
    postAction,
    putAction
  } from '@/api/manage'
  import DepartModel from './DepartModel'
  import TierModel from './TierModel'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import DepartListSeachList from './DepartListSeachList'
  import { filterObj } from '@/utils/util'
  export default {
    name: 'DepartList',
    mixins: [JeecgListMixin],
    components: {
      Tooltip,
      DepartModel,
      TierModel,
      DepartListSeachList,
      JDictSelectTag,
      JInput,
      JEllipsis
    },
    props: { node: '' },
    data() {
      return {
        sectionId:"",
        queryParam: {},
        dataStartsoucre:[],
        columns: [
          // {
          //   title: '层级编码',
          //   align: 'center',
          //   dataIndex: 'sectionNumber'
          // },
          {
            title: '名称',
            align: 'center',
            dataIndex: 'sectionName'
          },
          // {
          //   title: '父级',
          //   align: 'center',
          //   dataIndex: 'parentId'
          // },
          // {
          //   title: '层级',
          //   align: 'center',
          //   dataIndex: 'sectionRank'
          // },
          {
            title: '排序',
            align: 'center',
            dataIndex: 'sortNo'
          },
          {
              title: '操作',
              dataIndex: 'action',
              scopedSlots: {customRender: 'action'},
              align: "center",
              width: 150
            }
        ],
        dataSource2:[],
        ipagination2: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' å…±' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter2: {
          column: 'createTime',
          order: 'desc'
        },
        filters2: {},
        loading2: false,
        columns2: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },{
            title: '统一编码',
            align: 'center',
            dataIndex: 'equipmentId',
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
          },
          {
            title: '驱动类型',
            align: 'center',
            dataIndex: 'driveType'
          },
          // {
          //   title: '设备型号',
          //   align: 'center',
          //   dataIndex: 'equipmentModel'
          // },
          {
            title: '设备类型',
            align: 'center',
            dataIndex: 'equipmentType_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 150
          }
        ],
        url: {
          list: '/mdc/sectionEquipment/pageList',
          delete: '/mdc/sectionEquipment/deleteBatch',
          list2: '/mdc/mdcequipment/pageListEquipments',
          updateEquipment:'/mdc/sectionEquipment/updateEquipment',
          updateBatchSection:'/mdc/mdcequipment/updateBatchSection'
        },
        mapDateList:{}
      }
    },
    watch:{
      node(val) {
        // console.log(val);
        this.selectedRowKeys = [];
        if (val.entity) {
          // if(val.entity.id == "1528990384565837826"){
          //   this.columns = this.columns1
          // }else{
          //   this.columns = this.columns2
          // }
          // this.$set(this.queryParams, 'equipmentName', val.entity.equipmentName)
          // this.$set(this.queryParams, 'equipmentId', val.entity.equipmentId)
          // this.equipment = val.entity
        } else {
          // this.initEquipment(val.entity.id)
        }
      }
    },
    computed: {
      leftColMd() {
        return this.selectedRowKeys.length === 0 ? 24 : 8
      },
      rightColMd() {
        return this.selectedRowKeys.length === 0 ? 0 : 16
      }
    },
    methods: {
      deviceSearch() {
        // console.log(this.selectionRows)
        // console.log(this.selectionRows.id)
        // console.log(this.selectedRowKeys)
        this.$refs.seachModalForm.openPage(this.selectedRowKeys)
        this.$refs.seachModalForm.title = '选择设备'
        this.$refs.seachModalForm.disableSubmit = false
      },
      getDeviceRows(val) {
        // console.log(val)
        // let map = {}
        // val.forEach(item => {
        //   let key = item.equipmentId;
        //   if(!map[key]){
        //     let list = [];
        //     list.push(item);
        //     map[key] = list;
        //   }else {
        //     map[key].push(item);
        //   }
        // });
        // this.mapDateList = map;
        // console.log(this.mapDateList);
        var equipmentIds;
        for(var i = 0;i<val.length;i++){
          if (i == 0) {
            equipmentIds =  val[i].equipmentId;
          } else {
            equipmentIds = equipmentIds + "," + val[i].equipmentId;
          }
        }
        let obj = {
          id:this.sectionId,
          equipmentId:equipmentIds
        }
        var param = Object.assign(obj)
        putAction(this.url.updateEquipment,param).then(res=>{
          // console.log(res);
          if(res.success){
            this.loadData2();
          }
        })
        // console.log("========",equipmentIds);
        // this.form.setFieldsValue({
        //   equipmentId: equipmentIds,
        // })
      },
      onClearSelected() {
        this.selectedRowKeys = []
        this.selectionRows = []
      },
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        if(!params){
          return false;
        }
        this.loading = true;
        console.log(params);
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            //update-begin---author:zhangyafei    Date:20201118  for:适配不分页的数据列表------------
            // this.dataSource = res.result.records||res.result;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for:适配不分页的数据列表------------
          }else{
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() => {
          this.loading = false
        })
      },
      batchDelll: function () {
        if(!this.url.deleteBatch){
          this.$message.error("请设置url.deleteBatch属性!")
          return
        }
        if (this.selectedRowKeys.length <= 0) {
          // this.$message.warning('请选择一条记录!');
          this.$notification.warning({
            message:'消息',
            description:"请选择一条记录"
          });
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          this.$confirm({
            title: "确认删除",
            content: "是否删除选中数据?",
            onOk: function () {
              that.loading = true;
              deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
                if (res.success) {
                  //重新计算分页问题
                  that.reCalculatePage(that.selectedRowKeys.length)
                  // that.$message.success(res.message);
                  that.$notification.success({
                    message:'消息',
                    description:res.message
                  });
                  that.loadData();
                  that.onClearSelected();
                  that.$emit('delectTree','')
                } else {
                  // that.$message.warning(res.message);
                  that.$notification.warning({
                    message:'消息',
                    description:res.message
                  });
                }
              }).finally(() => {
                that.loading = false;
              });
            }
          });
        }
      },
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {ids: id}).then((res) => {
          if (res.success) {
            //重新计算分页问题
            that.reCalculatePage(1)
            // that.$message.success(res.message);
            that.$notification.success({
              message:'消息',
              description:res.message
            });
            that.loadData();
            that.onClearSelected();
            that.$emit('delectTree','')
          } else {
            // that.$message.warning(res.message);
            that.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        })
      },
      handleDeleteZi: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        let that = this;
        getAction(that.url.updateBatchSection, {ids: id}).then((res) => {
          if (res.success) {
            //重新计算分页问题
           that.reCalculatePage(1)
            // that.$message.success(res.message);
            that.$notification.success({
              message:'消息',
              description:res.message
            });
            that.loadData2();
            // that.onClearSelected();
            // that.$emit('delectTree','')
          } else {
            // that.$message.warning(res.message);
            that.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        })
      },
      getQueryParams2() {
        //获取查询条件
        let sqp = {}
        if (this.superQueryParams2) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams2)
          sqp['superQueryMatchType'] = this.superQueryMatchType2
        }
        var param = Object.assign(sqp, this.queryParam2, this.isorter2, this.filters2)
        param.field = this.getQueryField2()
        param.pageNo = this.ipagination2.current
        param.pageSize = this.ipagination2.pageSize
        param.sectionId = this.sectionId
        return filterObj(param)
      },
      loadData2(arg) {
        if (!this.url.list2) {
          this.$message.error('请设置url.list2属性!')
          return
        }
        //加载数据 è‹¥ä¼ å…¥å‚æ•°1则加载第一页的内容
        if (arg === 1) {
          this.ipagination2.current = 1
        }
        if (this.currentRoleId === '') return
        let params = this.getQueryParams2()//查询条件
        params.roleId = this.currentRoleId
        this.loading2 = true
        getAction(this.url.list2, params).then((res) => {
          if (res.success) {
            this.dataSource2 = res.result.records
            this.ipagination2.total = res.result.total
          }
          this.loading2 = false
        })
      },
      getQueryField2() {
        //TODO å­—段权限控制
        var str = 'id,'
        this.columns2.forEach(function(value) {
          str += ',' + value.dataIndex
        })
        return str
      },
      handleTableChange2(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO ç­›é€‰
        if (Object.keys(sorter).length > 0) {
          this.isorter2.column = sorter.field
          this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipagination2 = pagination
        this.loadData2()
      },
      modalFormOk(val) {
        // æ–°å¢ž/修改 æˆåŠŸæ—¶ï¼Œé‡è½½åˆ—è¡¨
        this.loadData();
        this.loadData2()
        this.$emit('openBasetree','')
        this.selectedRowKeys = []
      },
      handleEdit: function (record) {
        if (record.id) {
          this.$refs.modalForm.title = '编辑'
          this.$refs.modalForm.disableSubmit = false
          this.$refs.modalForm.edit(record)
        } else {
          this.$refs.tierModalForm.title = '编辑'
          this.$refs.tierModalForm.disableSubmit = false
          this.$refs.tierModalForm.edit(record)
        }
      },
      // handleEdit() {
      //   this.selectionRows = this.dataSource.filter(item => this.selectedRowKeys[0] == item.id)
      //   let row = this.selectionRows[0]
      //   if (row.equipmentId) {
      //     this.$refs.modalForm.title = '编辑设备'
      //     this.$refs.modalForm.disableSubmit = false
      //     this.$refs.modalForm.edit(row)
      //   } else {
      //     this.$refs.tierModalForm.title = '编辑层级'
      //     this.$refs.tierModalForm.disableSubmit = false
      //     this.$refs.tierModalForm.edit(row)
      //   }
      // },
      handleAdd() {
        if (this.node && JSON.stringify(this.node) != '{}') {
        //   // console.log(this.node);
        //   if(this.node.entity.equipmentId != null){
        //     // alert('不可在此层级下增加设备')
        //     this.$message.warning('不可在此层级下增加设备!')
        //   }else{
            this.$refs.modalForm.add(this.node)
            this.$refs.modalForm.title = '新增人员'
            this.$refs.modalForm.disableSubmit = false
          // }
        } else {
          this.$message.warning('请选择所属层级!')
        }
      },
      handleAddTier() {
        // if (this.node && JSON.stringify(this.node) != '{}') {
          // if(this.node.entity.equipmentId != null){
          //   // alert('不可在此层级下增加层级')
          //   this.$message.warning('不可在此层级下增加层级!')
          // }else{
            this.$refs.tierModalForm.add(this.node)
            this.$refs.tierModalForm.title = '新增部门'
            this.$refs.tierModalForm.disableSubmit = false
          // }
        // }else{
        //   this.$refs.tierModalForm.add(this.node)
        //   this.$refs.tierModalForm.title = '新增部门'
        //   this.$refs.tierModalForm.disableSubmit = false
        // }
      },
      pQuery(parentId) {
        this.queryParam.parentId = parentId[0]
        if(this.selectedRowKeys.length >= 1) {
          this.selectedRowKeys.length = 0
        }
        this.loadData()
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        // console.log(this.selectedRowKeys)
        this.sectionId =  this.selectedRowKeys[0]
        // console.log(this.sectionId)
        // this.ipagination2.current = 1
        this.loadData2(1)
      },
    },
    created() {
    }
  }
</script>
<style lang="less" scoped>
  @import '~@assets/less/common.less';
  @media screen and (min-width: 1920px){
    .device_list{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .device_list{
      height: 748px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .device_list{
      height: 600px!important;
      overflow: scroll;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .device_list{
      height: 501px!important;
      overflow: scroll;
    }
  }
  @media screen and (max-width: 1280px){
    .device_list{
      height: 501px!important;
      overflow: scroll;
    }
  }
</style>