sen-yu-new-web/src/views/cost-allocation-total/fabricLossesSummary.vue

<template>
  <!-- 【单证】 面料损耗汇总 -->
  <div id="costAllocationTotal">
    <!-- 查询区域 -->
    <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="8">
              <a-form-item label="制单人">
                <a-input placeholder="请输入" v-model="queryParam.makingPeople"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="审核人">
                <a-input placeholder="请输入" v-model="queryParam.approvalMan"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="计划单号">
                <a-input placeholder="请输入" v-model="queryParam.cCode"></a-input>
              </a-form-item>
            </a-col>
           
            <template v-if="toggleSearchStatus">
              <a-col :md="6" :sm="8">
              <a-form-item label="保存日期" has-feedback>
                <a-range-picker
                  :placeholder="['开始时间', '结束时间']"
                  format="YYYY-MM-DD"
                  style="width: 100%"
                  v-model="createTime"
                  @change="changeCreateTime"
                />
                <!-- <a-date-picker style="width: 100%" v-model="queryParam.createTime"  @change="onChange" :format="dateFormat"> </a-date-picker> -->
              </a-form-item>
            </a-col>
            
            <a-col :md="6" :sm="8">
              <a-form-item label="审核日期" has-feedback>
                <a-range-picker
                  :placeholder="['开始时间', '结束时间']"
                  format="YYYY-MM-DD"
                  style="width: 100%"
                  v-model="approvalDate"
                  @change="changeApprovalDate"
                />
                <!-- <a-date-picker style="width: 100%" v-model="queryParam.approvalDate" @change="onChange" :format="dateFormat"> </a-date-picker> -->
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="款号">
                <a-input placeholder="请输入" v-model="queryParam.cDefine22"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="计划员">
                <a-input placeholder="请输入" v-model="queryParam.planner"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="成衣合同号">
                <a-input placeholder="请输入" v-model="queryParam.contractNo"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-item label="业务员">
                <a-input placeholder="请输入" v-model="queryParam.cPersonName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
            <a-form-item label="状态">
                <a-select   mode="multiple"  @change="handleChange">
                    <!-- <a-select-option value="">请选择</a-select-option> -->
                    <a-select-option value="保存">保存</a-select-option>
                    <a-select-option value="提交">提交</a-select-option>
                    <a-select-option value="已指派">已指派</a-select-option>
                    <a-select-option value="返单">返单</a-select-option>
                    <a-select-option value="完成">完成</a-select-option>
                  </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
            <a-form-item label="是否有驳回">
                <a-select v-model="queryParam.rejectDate">
                    <a-select-option value="">请选择</a-select-option>
                    <a-select-option value="1">是</a-select-option>
                    <a-select-option value="0">所有</a-select-option>
                  </a-select>
              </a-form-item>
            </a-col>
            
            </template>

            <a-col :md="6" :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>
                <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <!-- table区域  -->
    <a-card :bordered="false" style=" marginTop:10px;">
      <a-table
        bordered
        rowKey="id"
        :columns="fabricLossesColumns"
        :data-source="fabricLossesData"
        :loading="loading"
        :pagination="ipagination"
        :scroll="{ x: 1200 ,y:450}"
        @change="handleTableChange"
      >
      <span slot="action" slot-scope="text, record">
          <!-- <a @click="handleApply(record)" v-if="apply == 1 && (record.status=='保存' ||record.status=='完成'|| record.status=='' || record.status==undefined)">发起申请</a>
          <a-divider type="vertical"  v-if="apply == 1 && (record.status=='保存' ||record.status=='完成'|| record.status=='' || record.status==undefined)"/> -->
          <a @click="openAppendixList(record)" v-if="record.attachs!==''&&record.attachs">附件</a>
          <a-divider type="vertical"  v-if="record.attachs!==''&&record.attachs"/>
          <a-dropdown>
          <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
            <a-menu slot="overlay" >
              <a-menu-item><a @click="cancelSumit(record)">取消提交</a></a-menu-item>
              <a-menu-item><a @click="details(record)">详情</a></a-menu-item>
              <a-menu-item><a @click="approvalHistory(record)">审批历史</a></a-menu-item>
            </a-menu>
            </a-dropdown>                  
        </span>
      </a-table>
    </a-card>

    <!-- 详情 大抽屉 -->
    <!-- <costDetail-drawer ref="costDetailDrawer" :fatherList="getCostList" @ok="modalFormOk"></costDetail-drawer> -->
    <attachment   ref="attachment"></attachment>
    <history-modal ref="historyModal"></history-modal>
    <detail-fabric-loss-table ref="detailFabricLossTable"  @close="getCostList"></detail-fabric-loss-table>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JEllipsis from '@/components/jeecg/JEllipsis'
import moment from 'moment'

import costDetailDrawer from '@views/cost-allocation-total/costDetailDrawer.vue'
import attachment from '@views/cost-allocation-total/modal/attachment.vue'
import historyModal from '@views/cost-allocation-total/modal/historyModal.vue'
import detailFabricLossTable from '@views/cost-allocation-total/modal/detailFabricLossTable.vue'

import { checkList,historyApproval,cancelSubmit } from '@api/document/fabricLossesSummary.js'

export default {
  name: 'fabricLossesSummary',
  mixins: [JeecgListMixin],
  components: { JEllipsis, moment, costDetailDrawer,attachment,historyModal,detailFabricLossTable },

  data() {
    let ellipsis = (v, l = 20) => <j-ellipsis value={v} length={l} />
    return {
      createTime:[],
      approvalDate:[],
      fabricLossesColumns: [
        {
          title: '保存日期',
          width: 120,
          dataIndex: 'createTime',
          customRender: text => {
            return moment(text).format('YYYY-MM-DD')
          },
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '审核人',
          width: 120,
          dataIndex: 'approvalMan',
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '审核日期',
          width: 120,
          dataIndex: 'approvalDate',
          customRender: text => {
            if(text!==''&&text){
              return moment(text).format('YYYY-MM-DD')
            }else{
              return ''
            }
            
          },
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '返单日期',
          width: 120,
          dataIndex: 'rejectDate',
          customRender: text => {
            if(text!==''&&text){
              return moment(text).format('YYYY-MM-DD')
            }else{
              return ''
            }
            
          },
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '计划单号',
          width: 120,
          dataIndex: 'ccode',
          ellipsis: true,
          className: 'replacecolor'
        },
        { title: '款号', width: 90, dataIndex: 'cdefine22',ellipsis: true, className: 'replacecolor' },
        {
          title: '计划员',
          width: 120,
          dataIndex: 'planner',
          className: 'replacecolor',
          ellipsis: true,
        },
        {
          title: '成衣合同号',
          width: 120,
          dataIndex: 'contractNo',
          ellipsis: true,
          className: 'replacecolor'
        },
        {
          title: '排单数量',
          width: 120,
          dataIndex: 'number',
          ellipsis: true,
          className: 'replacecolor'
        },
        { title: '业务员', width: 120, dataIndex: 'cpersonName',ellipsis: true, className: 'replacecolor' },
        {
          title: '实际出库数量',
          width: 180,
          dataIndex: 'outboundNumber',
          ellipsis: true,
          // customRender: t => ellipsis(t),
          className: 'replacecolor',
        },
        { title: '制单人', width: 120, dataIndex: 'makingPeople', ellipsis: true,className: 'replacecolor' },
        { title: '状态', width: 130, dataIndex: 'status', ellipsis: true,className: 'replacecolor',fixed: 'right' },
         {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            fixed: 'right',
            width: 130
          },
        

      ],
      fabricLossesData: [],
      // 查询条件
      queryParam: {
        // index: '',
        // planNum: '',
        // customerShortame: '',
        pageNo: '' // 点击的页数
      },
      dateFormat: 'YYYY-MM-DD',
      loading: false, // 表格加载
      apply:"",
    }
  },
  created() {
    this.apply = this.$route.query.apply;
    this.getCostList()
    document.title = '面料损耗列表'+ ' · ' + '马菲羊'
  },
  methods: {
   // 分页查询
   getCostList() {
      this.$nextTick(() => {
        this.loading = true
        checkList(this.queryParam).then(res => {
          this.loading = false
          if (res.success) {
            this.fabricLossesData = res.result.records
            this.ipagination = {
              total: res.result.total,
              current: res.result.current,
              pageSize: res.result.size
            }
          }
        })
      })
    },
    cancelSumit(record){
      var syApprovalHistory={
        stuta:'取消提交',
        planNo:record.ccode,
        processingOpinion:'',
        processedBy:this.$store.getters.userInfo.realname,
        processingTime:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        assignedBy:''
      }
      cancelSubmit({planNum:record.ccode,status:record.status,currentState:'取消提交',syApprovalHistory:syApprovalHistory}).then(res => {
          if (res.success) {
            this.getCostList()
            this.$message.success('取消提交成功')
          }else{
            this.$message.error(res.message);
          }
        })
    },
    approvalHistory(record){
      this.$refs.historyModal.histiryModVis = true
      this.$refs.historyModal.getHistoryList(record.ccode)
      // historyApproval({code:record.ccode}).then(res => {
      //     if (res.success) {
           
      //     }else{
      //       this.$message.error(res.message);
      //     }
      //   })
    },
    handleChange(value){
      this.queryParam.status = value.toString()
    },
    details(record){
      this.$refs.detailFabricLossTable.detailModVis = true
      this.$refs.detailFabricLossTable.status = record.status
      this.$refs.detailFabricLossTable.onSearch(record.ccode,'0')
    },
    searchQuery() {
      this.queryParam.pageNo = '1'
      this.getCostList()
    },
    searchReset() {
      this.queryParam.pageNo = ''
      this.queryParam = {}
      this.getCostList()
    },
    onChange(){
      this.queryParam.createTime = (this.queryParam.createTime&&this.queryParam.createTime!=='')?this.queryParam.createTime.format('YYYY-MM-DD'):''
      this.queryParam.approvalDate = (this.queryParam.approvalDate&&this.queryParam.approvalDate!=='')?this.queryParam.approvalDate.format('YYYY-MM-DD'):''
    },

    handleTableChange(pagination, filters, sorter) {
      this.queryParam.pageNo = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getCostList()
    },
    changeCreateTime(data){
      this.createTime=data
       this.queryParam.createTimeE=this.createTime.length==2?this.createTime[1].format('YYYY-MM-DD'):''
       this.queryParam.createTimeB=this.createTime.length==2?this.createTime[0].format('YYYY-MM-DD'):''
    },
    changeApprovalDate(data){
      this.approvalDate = data
      this.queryParam.approvalDateB=this.approvalDate.length==2?this.approvalDate[0].format('YYYY-MM-DD'):''
       this.queryParam.approvalDateE=this.approvalDate.length==2?this.approvalDate[1].format('YYYY-MM-DD'):''
    },
    handleApply(record){
      var data = {
        type:"面损表",
        ccode:record.ccode,
      };
      window.parent.postMessage({msg:"startApply", data:data}, "*");
    },
    openAppendixList(record){
      this.$refs.attachment.AttachmentModVis = true
      var attachmentArr = record.attachs.split(',')
      var attachList = [];
      attachmentArr.forEach(item=>{
        var attach = {};
          attach.name = item;
          attach.src=item;
          attachList.push(attach);
      })
      this.$refs.attachment.attachmentData =  attachList;
    },
  },
  computed: {},
  mounted() {}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/overwriter.less';
/deep/ .ant-table-thead > tr > th {
  text-align: center;
  // font-weight: 700;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

// /deep/ th.replacecolor {
//   background-color: #ccc;
// }
</style>