mts / MTS-UI · Files

<template>
  <a-card :bordered="false" :class="'cust-erp-sub-tab'">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="图号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入图号" v-model="queryParam.drawingNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <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>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" v-if="mainId">
      <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>
      <a-dropdown v-if="selectedRowKeys.length > 0">

        <a-button type="primary" @click="batchDel">
          <a-icon type="delete" />
          删除
        </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"
        bordered
        rowKey="id"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"

        @expand="onExpand"

        @change="handleTableChange"
        :expandedRowKeys="expandedRowKeys">

        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
          <span slot="action" slot-scope="text, record">

            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="complete(record)">完成</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>

        </a-table>

        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"

            :color="tag.status === 0 ? 'volcano' : 'geekblue'">

            {{ tag.name }}
          </a-tag>
        </span>

      </a-table>
    </div>

    <schedulerDetail-modal ref="modalForm" @ok="modalFormOk" :mainId="mainId"></schedulerDetail-modal>

    <scheduler-complete-modal ref="completeForm" @ok="completeFormOk" :mainId="mainId"></scheduler-complete-modal>

  </a-card>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import SchedulerDetailModal from './modules/SchedulerDetailModal'
import SchedulerCompleteModal from '@views/scheduler/modules/SchedulerCompleteModal'
import { getTechnology, getTechnologyType } from '@api/api'
import { queryDetailList } from '../../api/schedulerApi'

export default {
  name: 'SchedulerDetailList',
  mixins: [JeecgListMixin],
  components: { SchedulerCompleteModal, SchedulerDetailModal },
  props: {
    mainId: {
      type: String,
      default: '',
      required: false
    }
  },
  watch: {
    mainId: {
      immediate: true,
      handler(val) {
        if (!this.mainId) {
          this.clearList()
        } else {
          this.queryParam['headerId'] = val.toString()
          this.loadData(1)

        }
      }

    }
  },
  data() {
    return {
      description: '生产计划管理页面',
      disableMixinCreated: true,

      expandedRowKeys: [],

      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1

          }
        },

        {
          title: '图号',
          align: 'center',
          dataIndex: 'drawingNo'

        },

        {
          title: '父图号',
          align: 'center',

          width: 60,

          dataIndex: 'parentDrawingNo'
        },
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '型号规格',
          align: 'center',
          dataIndex: 'spec'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'qty'
        },
        {
          title: '长度(米)',
          align: 'center',
          dataIndex: 'length'
        },
        {
          title: '重量(kg)',
          align: 'center',
          dataIndex: 'weight'
        },
        {
          title: '工艺',
          align: 'center',

          dataIndex: 'tags',
          scopedSlots: {
            customRender: 'tags',
          },
        },
        {

          title: '状态',
          align: 'center',

          width: 80,

          dataIndex: 'status',
          customRender: function(text) {
            if (text === 0) {
              return '生产中'
            } else if (text === 1) {
              return '按时完成'
            } else if (text === 2) {
              return '超时完成'
            }

          }

        },
        {
          title: '创建日期',
          align: 'center',
          dataIndex: 'createTime',
          customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          }

        }

      ],
      innerColumns: [

        {
          title: '#', dataIndex: '', key: 'rowIndex', width: 60, align: 'center', customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },

        { title: '名称', align: 'center', dataIndex: 'name' },

        { title: '工艺', align: 'center', dataIndex: 'userDef3' },

        { title: '准备工时(分钟)', align: 'center', dataIndex: 'readyTime' },
        { title: '操作工时(分钟)', align: 'center', dataIndex: 'technologyTime' },

        {
          title: '状态', align: 'center', dataIndex: 'status', customRender: function(text) {
            if (text === 0) {
              return '生产中'
            } else if (text === 1) {
              return '按时完成'
            } else if (text === 2) {
              return '超时完成'
            }
          }
        },

        { title: '排序', align: 'center', dataIndex: 'sequence' },
        { title: '完成人', align: 'center', dataIndex: 'completeBy' },

        {
          title: '完成时间', align: 'center', dataIndex: 'completeDate', customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          }
        },

        { title: '延误原因', align: 'center', dataIndex: 'delayReason' },

        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 160,
          scopedSlots: { customRender: 'action' }
        }

      ],
      url: {
        list: '/scheduler/schedulerDetail/list',
        delete: '/scheduler/schedulerHeader/deleteSchedulerDetail',
        deleteBatch: '/scheduler/schedulerHeader/deleteBatchSchedulerDetail',
        exportXlsUrl: '/scheduler/schedulerHeader/exportSchedulerDetail',
        importUrl: '/scheduler/schedulerHeader/importSchedulerDetail'

      },

      innerData: [],

      dictOptions: {},
      superFieldList: [],
      technologyList: {},
      technologyTypeList: {}
    }
  },
  created() {
    this.getSuperFieldList()
    this.getTechnologyTypeList()
    this.getTechnologyList()
  },
  computed: {
    importExcelUrl() {
      return `${window._CONFIG['domianURL']}/${this.url.importUrl}/${this.mainId}`
    }
  },
  methods: {
    clearList() {
      this.dataSource = []
      this.selectedRowKeys = []
      this.ipagination.current = 1
    },
    getSuperFieldList() {
      let fieldList = []
      fieldList.push({ type: 'string', value: 'projectCode', text: '项目号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'projectName', text: '项目名称', dictCode: '' })
      fieldList.push({ type: 'string', value: 'orderNo', text: '生产令号', dictCode: '' })
      fieldList.push({ type: 'string', value: 'partNo', text: '部件号', dictCode: '' })
      fieldList.push({ type: 'date', value: 'created', text: '创建时间' })
      fieldList.push({ type: 'string', value: 'createBy', text: '创建人', dictCode: '' })
      this.superFieldList = fieldList
    },
    complete(record) {
      this.$refs.completeForm.edit(record)
      this.$refs.completeForm.title = '完成'
      this.$refs.completeForm.disableSubmit = false
    },
    getTechnologyTypeList() {
      const that = this
      let obj = getTechnologyType()
      obj.then((res) => {
        if (res.success) {
          that.technologyTypeList = res.result
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    getTechnologyList() {
      const that = this
      let obj = getTechnology()
      obj.then((res) => {
        if (res.success) {
          that.technologyList = res.result
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    rewriteTechnologyType(val) {
      this.technologyTypeList.forEach(item => {
        if (item.typeId == val) {
          return item.name
        }
      })
    },

    completeFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData()
      //清空列表选中
      this.onClearSelected()
    },

    onExpand(expanded, record) {

      if (expanded) {
        let params = {
          'drawingNo': record.drawingNo,
          'name': record.name,
          'headerId': record.headerId

        }

        queryDetailList(params).then((res) => {
          if (res.success) {
            this.innerData = res.result
          }
        })
        this.expandedRowKeys = []
        this.expandedRowKeys.push(record.id)
      } else {
        this.expandedRowKeys = []
      }

    }
  }

}

</script>
<style scoped>

@import '~@assets/less/common.less'

</style>