cuilei
5 天以前 ba77fdc6a30c9ad0941e40319f8c4f6fe6fdf9f1
src/views/mdc/base/modules/deviceCalendar/DeviceCalendarListModel.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,340 @@
<template>
  <a-modal :title="title" width="70%" :visible="visible" :maskClosable="false" @ok="handleOk" @cancel="handleCancel"
           cancelText="关闭">
    <a-card :bordered="false">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="6"  v-if="isDepartType == 0">
              <a-form-item label="部门" v-if="isDepartType == 0">
                <!--<a-select v-model="queryParam.sectionPid" placeholder="请选择部门" :options="sectionPData" @change="initGroupOptions" />-->
                <a-tree-select
                  v-model="value"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="treeData"
                  placeholder="请选择部门"
                  tree-default-expand-all
                >
                  <!--<span v-if="key === '0-0-1'" slot="title" slot-scope="{ key, value }" style="color: #08c">-->
                  <!--Child Node1 {{ value }}-->
                  <!--</span>-->
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item label="车间" >
                <!--<a-select v-model="queryParam.sectionId" placeholder="请选择团队" :options="sectionData"/>-->
                <a-tree-select
                  v-model="valueProduct"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="sectionData"
                  placeholder="请选择车间"
                  tree-default-expand-all
                >
                  <!--<span v-if="key === '0-0-1'" slot="title" slot-scope="{ key, value }" style="color: #08c">-->
                  <!--Child Node1 {{ value }}-->
                  <!--</span>-->
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item label="统一编码">
                <a-input placeholder="请输入统一编码检索" v-model="queryParam.equipmentId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="6">
              <a-form-item label="设备名称">
                <a-input placeholder="请输入设备名称检索" v-model="queryParam.equipmentName"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
      <div class="table-operator">
        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table ref="table" size="middle" bordered rowKey="id" :scroll="{  y: 400 }" :columns="columns"
                 :dataSource="dataSource" :pagination="ipagination" :loading="loading"
                 :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                 @change="handleTableChange">
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-card>
  </a-modal>
</template>
<script>
  import {mapActions} from 'vuex'
  import {
    ajaxGetSelectItems
  } from '@/api/api'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {
    deleteAction,
    requestPut,
    getAction,
    postAction
  } from '@/api/manage'
  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 JDate from '@/components/jeecg/JDate'
  import moment from 'moment'
  export default {
    name: 'DeviceCalendarListModel',
    mixins: [JeecgListMixin],
    components: {
      JDictSelectTag,
      JEllipsis,
      JInput,
      Tooltip,
      JDate
    },
    props: {
      status: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        isDepartType:'',
        /*readOnly:true,*/
        title:'',
        visible: false,
        SelectedList:[],
        treeData:[],
        /*disableMixinCreated: true,
        queryParam: {},*/
        columns: [
          {
            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: 'controlSystem'
          },
        ],
        sectionPData: [],
        sectionData: [],
        url: {
          list: '/mdc/mdcEquipment/findEquipmentList',
          loadOptions: '/sys/sysDepart/loadDepartTreeOptions',
          loadProductionOptions:'/mdc/mdcProduction/loadProductionTreeOptions'
        },
        value:undefined,
        valueProduct:undefined
      }
    },
    created() {
      this.queryTreeData()
    },
    watch: {
      value(value) {
        // console.log(value);
        this.queryParam.departId = value
      },
      valueProduct(value){
        this.queryParam.productionId = value
      }
    },
    methods: {
      ...mapActions(['QueryDepartTree']),
      queryTreeData() {
        this.QueryDepartTree().then(res => {
          if (res.success) {
            this.isDepartType = res.result[0].value
          } else {
            // this.$message.warn(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        }).finally(() =>{
        })
      },
      onSelectChange(selectedRowKeys, selectionRows) {
        // this.SelectedList.push(selectedRowKeys);
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows
        // this.SelectedList =[...this.SelectedList,...selectionRows];
        // console.log(this.SelectedList);
      },
      handleTableChange(pagination, filters, sorter) {
        // this.onClearSelected()
        //分页、排序、筛选变化时触发
        //TODO ç­›é€‰
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.loadData();
      },
      openPage() {
        this.onClearSelected()
        this.valueProduct=null
        this.visible = true
        this.dataSource = [];
        this.queryParam = {
          status: this.status
        };
        this.loadData();
        this.initOptions();
        this.initGroupOptions()
      },
      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;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            // console.log(res)
            //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
        })
      },
      modalFormOk(val) {
        // æ–°å¢ž/修改 æˆåŠŸæ—¶ï¼Œé‡è½½åˆ—è¡¨
        this.loadData();
        this.selectedRowKeys = [val.id];
      },
      searchQuery() {
        this.loadData();
        this.onClearSelected()
      },
      searchReset() {
        this.queryParam = {
          status: 1
        };
        this.loadData();
        this.onClearSelected()
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleCancel() {
        this.close()
      },
      handleOk() {
        // this.selectionRows =  this.SelectedList;
        // console.log(this.selectionRows);
        this.$emit('sendSelectionRows', this.selectionRows)
        this.close()
      },
      initOptions() {
        getAction(this.url.loadOptions).then(res => {
          if (res.success) {
            this.treeData = res.result
          } else {
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        })
      },
      initGroupOptions() {
        getAction(this.url.loadProductionOptions).then(res => {
          if (res.success) {
            this.sectionData = res.result
          } else {
            // this.$message.warning(res.message)
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
          }
        })
      }
    },
  }
</script>
<style>
  @import '~@assets/less/common.less';
  .frozenRowClass {
    color: #c9c9c9;
  }
  .success {
    color: green;
  }
  .error {
    color: red;
  }
</style>