zs-mes-before.git

<template>
  <div class="mod-config">
    <basic-container>
      <ttable
        :table="table"
        @handleSelectionChange="handleSelectionChange"
        :uploadInfo="uploadInfo"
        :prelang="prelang"
        :options="options"
        :ajaxFun="ajaxFun"
        ref="mpsRequirementsTable"
        :paramArr="type"
      >
        <template #toolbar>
          <el-dropdown @command="handleCommand">
            <el-button>
              状态改变<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :key="item"
                :command="item.command"
                v-for="item in stateTagArr"
                :disabled="item.disabled"
                >{{ item.label }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!--          <el-dropdown @command="handleDataList" style="margin-left: 10px">-->
          <!--            <el-button-->
          <!--              >数据显示<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
          <!--            </el-button>-->
          <!--            <el-dropdown-menu slot="dropdown">-->
          <!--              <el-dropdown-item command="2">显示全部</el-dropdown-item>-->
          <!--              <el-dropdown-item command="1">显示部分</el-dropdown-item>-->
          <!--            </el-dropdown-menu>-->
          <!--          </el-dropdown>-->
        </template>
      </ttable>
 
      <!-- 弹窗, 新增 / 修改 -->
      <table-form
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getData"
      ></table-form>
      <!-- 创建主生产计划 -->
      <schedule-table
        v-if="scheduleVisible"
        ref="schedule"
        @refreshDataList="getData"
      ></schedule-table>
      <!-- 客户订单 -->
      <CustomerOrder v-if="customerOrderVisible" ref="customerOrder" />
    </basic-container>
  </div>
</template>
 
<script>
import { mapGetters } from 'vuex'
import TableForm from './mpsrequirements-form'
import ttable from '@/views/common/ztt-table.vue'
import ScheduleTable from './schedule-table'
import CustomerOrder from './customerorder'
import {
  fetchListMpsRequirements,
  delMpsRequirements,
  changeState
} from '../../../api/plan/mpsrequirements'
export default {
  data() {
    return {
      customerOrderVisible: false,
      ajaxFun: fetchListMpsRequirements,
      stateTagArr: [
        {
          label: '已计划',
          command: 'PLAN',
          disabled: false,
          permitArr: ['02issued', '03completed', '04canceled']
        },
        {
          label: '已下达',
          command: 'COMMAND',
          disabled: false,
          permitArr: ['03completed', '04canceled', '01planned']
        },
        {
          label: '已完成',
          command: 'COMPLETE',
          disabled: false,
          permitArr: ['01planned', '02issued', '04canceled']
        },
        {
          label: '已取消',
          command: 'CANCEL',
          disabled: false,
          permitArr: ['01planned', '02issued', '03completed']
        }
      ],
      type: [1],
      scheduleVisible: false,
      coStates: [],
      currentRow: null,
      multipleSelection: [],
      isShowQuery: false,
      uploadInfo: {
        // 是否展示上传EXCEL以及对应的url
        isShow: false,
        url: ''
      },
      dateTimeFilters: {},
      prelang: 'operation',
      options: {
        height: 300, // 默认高度-为了表头固定
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: false, // 是否要高亮当前行
        border: true, // 是否有纵向边框
        lazy: false, // 是否需要懒加载
        fit: true, // 列的宽度是否自撑开
        multiSelect: true, //
        seqNo: true,
        isRefresh: true, // 是否显示刷新按钮
        isShowHide: true, // 是否显示显影按钮H
        isSearch: true, // 高级查询按钮
        defaultOrderBy: { column: 'createTime', direction: 'desc' }
      },
      table: {
        total: 0,
        currentPage: 1,
        pageSize: 20,
        data: [],
        // 标题
        column: [
          {
            width: '100',
            prop: 'indeRequNo',
            label: '需求编号',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text',
            render: { fun: this.addOrUpdateHandle }
          },
          {
            width: '80',
            prop: 'qtyRequired',
            label: '需求数量',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '80',
            prop: 'planRequired',
            label: '已计划数量',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '80',
            prop: 'remainderRequired',
            label: '剩余数量',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            minWidth: '80',
            prop: 'unit',
            label: '零件单位',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '120',
            prop: 'sourceType',
            label: '来源类型',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'select',
            formatter: this.getMpsSourceType,
            optList: () => {
              return this.getMpsSourceTypeList()
            }
          },
          {
            width: '120',
            prop: 'customerOrderNo',
            label: '客户订单号',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '140',
            prop: 'requiredDate',
            label: '需求日期',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange',
            formatter: this.formatDutyDate
          },
          {
            width: '120',
            prop: 'partNo',
            label: '零件号',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '100',
            prop: 'partName',
            label: '零件名称',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '100',
            prop: 'state',
            label: '状态',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'select',
            formatter: this.getMpsState,
            optList: () => {
              return this.getMpsStateList()
            }
          },
          {
            width: '140',
            prop: 'remark',
            label: '备注',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '140',
            prop: 'updateTime',
            label: '更新时间',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange',
            formatter: this.formatDutyDate
          },
          {
            width: '100',
            prop: 'updateUser',
            label: '更新人',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          },
          {
            width: '140',
            prop: 'createTime',
            label: '创建时间',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'datetimerange',
            formatter: this.formatDutyDate
          },
          {
            width: '100',
            prop: 'createUser',
            label: '创建人',
            sort: true,
            isTrue: true,
            isSearch: true,
            searchInfoType: 'text'
          }
        ],
        toolbar: [
          {
            text: '新增',
            type: 'primary',
            fun: this.addOrUpdateHandle,
            disabled: false
          },
          {
            text: '主生产计划',
            disabled: false,
            fun: this.masterPlanHandle
          },
          {
            text: '查看客户订单',
            disabled: false,
            fun: this.getCustomerData
          }
        ],
        operator: [
          {
            text: '删除',
            type: 'text',
            size: 'small',
            fun: this.deleteHandle,
            show: {
              val: ['01planned'],
              key: 'state'
            }
          }
        ],
        operatorConfig: {
          fixed: 'right',
          label: '操作',
          width: 200,
          minWidth: 100
        }
      },
      addOrUpdateVisible: false,
      statesList: [
        { value: '01planned', label: '已计划' },
        { value: '02issued', label: '已下达' },
        {
          value: '03completed',
          label: '已完成'
        },
        { value: '04canceled', label: '已取消' }
      ],
      sourceTypeList: [
        { value: '01', label: '自建需求' },
        { value: '02', label: '客户订单' }
      ]
    }
  },
  components: {
    ttable,
    TableForm,
    ScheduleTable,
    CustomerOrder
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    // 获取数据列表
    getData() {
      this.$refs.mpsRequirementsTable.getDataList()
    },
    handleDataList(command) {
      this.type = [command]
      this.$nextTick(() => {
        this.getData()
      })
    },
    formatDutyDate(row, column, cellValue) {
      if (cellValue) {
        const dutyDateList = /\d{4}-\d{1,2}-\d{1,2}/g.exec(cellValue)
        if (dutyDateList && dutyDateList.length > 0) {
          return dutyDateList[0]
        }
      }
      return ''
    },
    // 新增 / 修改
    addOrUpdateHandle(row) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(row ? row.id : row, row ? row.state : row)
      })
    },
    // 删除
    deleteHandle(row) {
      this.$confirm('是否确认删除ID为' + row.id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      })
        .then(function() {
          return delMpsRequirements(row.id)
        })
        .then((data) => {
          this.$message.success('删除成功')
          this.getData()
        })
    },
    // 标记状态
    handleCommand(event) {
      var eventName
      if (event == 'PLAN') {
        eventName = '已计划'
      } else if (event == 'COMMAND') {
        eventName = '已下达'
      } else if (event == 'COMPLETE') {
        eventName = '已完成'
      } else {
        eventName = '已取消'
      }
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        // 判断一下选择的状态是否一致
        changeState(
          this.multipleSelection.map((item) => {
            return item.id
          }),
          event
        ).then((data) => {
          this.$message.success('标记' + eventName + '成功')
          this.getData()
        })
      } else {
        this.$message.error('请选择主生产计划需求')
      }
    },
    // 创建主生产计划
    masterPlanHandle() {
      if (this.multipleSelection && this.multipleSelection.length > 0) {
        // 判断一下剩余数量是否大于0
        for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
          if (this.multipleSelection[i].remainderRequired <= 0) {
            this.$message.error('请选择剩余数量大于0的需求')
            return
          }
        }
        this.scheduleVisible = true
        this.$nextTick(() => {
          this.$refs.schedule.init(this.multipleSelection)
        })
      } else {
        this.$message.error('请选择主生产计划需求')
      }
    },
    getMpsSourceTypeList() {
      return this.sourceTypeList
    },
    getMpsSourceType(row, column, cellValue) {
      this.sourceTypeList.forEach((obj) => {
        if (obj.value === cellValue) {
          cellValue = obj.label
        }
      })
      return cellValue
    },
    getMpsStateList() {
      return this.statesList
    },
    getMpsState(row, column, cellValue) {
      this.statesList.forEach((obj) => {
        if (obj.value === cellValue) {
          cellValue = obj.label
        }
      })
      return cellValue
    },
    // 查看客户订单
    getCustomerData() {
      if (this.multipleSelection && this.multipleSelection.length == 1) {
        this.customerOrderVisible = true
        this.$nextTick(() => {
          this.$refs.customerOrder.getCustomerOrder(
            this.multipleSelection[0].id
          )
        })
      } else if (this.multipleSelection.length > 1) {
        this.$message.error('最多选择一条主需求')
      } else {
        this.$message.error('请选择一条主需求')
      }
    },
    // table自带事件
    handleSelectionChange(val) {
      // 根据状态，禁用表头按钮
      // 筛选出选中记录的状态
      var stateArr = val.map(function(value, index) {
        return value.state
      })
      // 选中状态数组元素去重
      var uniqueStateArr = []
      for (var i = 0; i < stateArr.length; i++) {
        if (uniqueStateArr.indexOf(stateArr[i]) == -1) {
          uniqueStateArr.push(stateArr[i])
        }
      }
      // 循环自定义按钮，判断每个按钮的permitArr是否完全包含选中状态，若完全包含，则按钮亮，否则按钮灰
      for (var i = 0; i < this.stateTagArr.length; i++) {
        if (
          uniqueStateArr.every((val) =>
            this.stateTagArr[i].permitArr.length <= 0
              ? true
              : this.stateTagArr[i].permitArr.includes(val)
          )
        ) {
          this.stateTagArr[i].disabled = false
        } else {
          this.stateTagArr[i].disabled = true
        }
      }
      this.multipleSelection = val
    }
  }
}
</script>