zenglf
2023-09-28 8e75a78f55d60565eb48b25eafd4eb07939ce2cc
src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementModalList.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,464 @@
<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="8" :sm="8">
             <a-form-item label="时间">
               <a-range-picker @change="dateParamChange" format="YYYYMMDD" v-model="dates"/>
             </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">
                    <span slot="isDaySpan" slot-scope="text, record">
           <span v-if="text == 'true'">是</span>
           <span v-if="text == 'false'">否</span>
         </span>
        </a-table>
      </div>
      <!-- table区域-end -->
    </a-card>
  </a-modal>
</template>
<script>
  import {mapActions} from 'vuex'
  import { filterObj } from '@/utils/util';
  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{
        /* æŸ¥è¯¢æ¡ä»¶-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        /* æ•°æ®æº */
        dataSource:[],
        /* åˆ†é¡µå‚æ•° */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " å…±" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* æŽ’序参数 */
        isorter:{
          column: 'createTime',
          order: 'desc',
        },
        /* ç­›é€‰å‚æ•° */
        filters: {},
        /* table加载状态 */
        loading:false,
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        /* æŸ¥è¯¢æŠ˜å  */
        toggleSearchStatus:false,
        /* é«˜çº§æŸ¥è¯¢æ¡ä»¶ç”Ÿæ•ˆçŠ¶æ€ */
        superQueryFlag:false,
        /* é«˜çº§æŸ¥è¯¢æ¡ä»¶ */
        superQueryParams: '',
        dates:[],
        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: 'effectiveDate',
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
          },
          {
            title: '设备名称',
            align: 'center',
            dataIndex: 'equipmentName',
          },
          {
            title: '班制',
            align: 'center',
            dataIndex: 'shiftName'
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftSubName'
          },
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'startDate'
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endDate'
          },
          {
            title: '是否跨天',
            align: 'center',
            dataIndex: 'isDaySpan',
            scopedSlots: { customRender: 'isDaySpan' }
          },
          {
            title: '开始休息时间',
            align: 'center',
            dataIndex: 'sleepStartDate'
          },
          {
            title: '结束休息时间',
            align: 'center',
            dataIndex: 'sleepEndDate'
          }
        ],
        sectionPData: [],
        sectionData: [],
        url: {
          list: '/mdc/mdcDeviceCalendar/list',
          loadOptions: '/sys/sysDepart/loadDepartTreeOptions',
          loadProductionOptions:'/mdc/mdcProduction/loadProductionTreeOptions'
        },
        value:undefined,
        valueProduct:undefined
      }
    },
    created(){
      // this.dates = [moment().subtract('days', 0), moment().subtract('days', 0)]
      // this.queryParam.startTime = moment(this.dates[0]).format('YYYYMMDD')
      // this.queryParam.endTime = moment(this.dates[1]).format('YYYYMMDD')
      // this.queryTreeData()
      this.loadData()
    },
    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(() =>{
        })
      },
      getQueryParams() {
        //获取查询条件
        let sqp = {}
        if(this.superQueryParams){
          sqp['superQueryParams']=encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters);
        param.field = this.getQueryField();
        param.pageNo = this.ipagination.current;
        param.pageSize = this.ipagination.pageSize;
        //获取用户定制的参数属性
        if (this.getCustomQueryParams) {
          param = this.getCustomQueryParams(param);
          if(!param){
            return false;
          }
        }
        return filterObj(param);
      },
      getQueryField() {
        //TODO å­—段权限控制
        var str = "id,";
        this.columns.forEach(function (value) {
          str += "," + value.dataIndex;
        });
        return str;
      },
      loadData(arg) {
        this.dataSource = [];
        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;
        }
        params.startTime = this.queryParam.startTime;
        params.endTime = this.queryParam.endTime;
        params.orderByName = "ascend";
        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)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      dateParamChange(v1, v2) {
        this.queryParam.startTime = v2[0]
        this.queryParam.endTime = v2[1]
      },
      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();
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },
      openPage() {
        this.visible = true
        this.onClearSelected()
        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.dates = []
        this.queryParam = {}
        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>