jf-frock/src/views/ProductionOrderList/ProductionsOrder/BST_list.vue

<template>
  <div>
    <FullPage title='生产订单列表'
              :list='set_list'
              @init='init'
              @searchData='searchData'
              @changePage='changePage'
              @changeSize='changeSize'
              @selectTable='selectTable'
              :tableColums='computedTable'
              :showPage='false'
              :tableData='tableData'
              :page_index='page_index'
              :total='total'>
      <div slot='titleButton'>
        <!-- <Button v-if='persimissionData["批量打印二维码"]||persimissionData.all'
                type="primary"
                style="margin-right:10px"
                ghost>批量打印二维码</Button> -->
        <!-- <Button @click="openModal(selects)"
                type="primary"
                ghost>批量下生产排产</Button> -->
      </div>

      <div slot='navButton'>
        <!-- <Button @click="setupTableHeader"
                v-if='persimissionData["表头设置"]||persimissionData.all'
                type="primary"
                ghost
                icon='ios-cog'>表头设置</Button> -->
      </div>
      <template slot="basicTypeSet"
                slot-scope="{row}">
        <div>
          <span v-for="item in warningList"
                :key="item.id"
                :style="{color:item.color}"
                v-show="item.id==row.warning_state">{{item.title}}</span>
        </div>
      </template>
      <template slot='set'
                slot-scope='{row}'>
        <div>
          <!-- <a v-if='persimissionData["原材料预算"]||persimissionData.all'
             style="margin:0 5px"
             @click="goOriginalPage(row)">原材料预算</a> -->
          <!-- <a v-if='persimissionData["打印二维码"]||persimissionData.all'
             style="margin:0 5px">打印二维码</a> -->
          <a v-if='persimissionData["详情"]||persimissionData.all'
             style="margin:0 5px"
             @click="goDetial(row)">详情</a>
          <!-- <a v-if='persimissionData["下生产计划"]||persimissionData.all'
             style="margin:0 5px"
             :disabled="row.state==2"
             @click="openModal(row)">下生产排产</a> -->
              <a :disabled="row.part_state != 0"
             style="margin:0 5px"
             @click="del(row)">删除</a>
        </div>
      </template>
      <template slot="pageSlot">
        <div class="pageSlotStyle">
          <Page :page-size-opts="[10, 20, 30, 40,100,1000]"
                @on-page-size-change='changeSize'
                @on-change='changePage'
                :current='page_index'
                show-total
                :total="total"
                show-sizer
                :page-size='page_size' />
        </div>
      </template>
    </FullPage>
       <Modal width='35'
          title='下生产排产'
          :mask-closable="false"
           v-model="show">
      <Form
            ref='forms'
            :rules='rules'>
         <FormItem v-for="item in basics_procedure_list" :key="item.id" :label='`要求${item.title}完成的时间:`' style="margin-left:60px" >
          <DatePicker type="daterange" placeholder="请选择" style="width: 200px" v-model='item.time' transfer :options='options' @on-open-change='timeFocus($event,item)'></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer"
           class="modal-footer">
        <Button @click="show=false">取消</Button>
        <Button @click="finishDataTrue"
                type='primary'>确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      options:{},
      basics_procedure_list:[],
        rules: {
        time: [{ required: true, message: '请选择时间', }]
      },
      show:false,
      tableColums: [
        { type: 'selection', key: 'selection', title: '全选', fixed: 'left', width: 90, align: 'center' },
        { title: '项目编号', align: 'center', key: 'order_no', width: '200' },
        // {
        //   title: '订单类型', align: 'center', key: 'order_type', width: '200',
        //   render: (h, params) => {
        //     return h('span', {}, params.row.order_type == 1 ? '工装' : '家装')
        //   }
        // },
        // {
        //   title: '生产订单编号', align: 'center', key: 'oa_order_no', minWidth: 200,
        //   render: (h, params) => h('span', {}, params.row.oa_order_no || params.row.order_no)
        // },
         { title: '项目名称', align: 'center', key: 'residential_name', minWidth: 200 },
        {
          title: '生产状态', align: 'center', key: 'state', minWidth: 150,
          render: (h, params) => h('span', {},
            params.row.state == 0 ? '未下计划'
              : (params.row.state == 1 ? '计划中'
                : (params.row.state >= 2 ? '计划完成' : '全部'))
          )
        },
       
        // { title: '地址', align: 'center', key: 'address', minWidth: 200 },
        // { title: '客户姓名', align: 'center', key: 'client_name', minWidth: 200 },
        // { title: '手机号', align: 'center', key: 'mobile', minWidth: 200 },
        // { title: '测量人员', align: 'center', key: 'nickname', minWidth: 200 },
        { title: '紧急程度', align: 'center', key: 'warning_state', minWidth: 100, slot: 'basicTypeSet', },
        {
          title: '下单日期', align: 'center', minWidth: 200, key: 'crt_time',
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.crt_time * 1))
        },
        // {
        //   title: '测量开始日期', align: 'center', minWidth: 200, key: 'measure_start_time',
        //   render: (h, params) => h('span', {}, this.func.replaceDate(params.row.measure_start_time * 1, 1))
        // },
        // {
        //   title: '测量结束日期', align: 'center', minWidth: 200, key: 'measure_end_time',
        //   render: (h, params) => h('span', {}, this.func.replaceDate(params.row.measure_end_time * 1, 1))
        // },
        // {
        //   title: '实际测量时间', align: 'center', minWidth: 200, key: 'measure_time',
        //   render: (h, params) => h('span', {}, this.func.replaceDate(params.row.measure_time * 1))
        // },
        { title: '操作', align: 'center', key: 'set', slot: 'set', fixed: 'right', width: '320' },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      planInfo: {
        order_no: null,
        start_time: '',
        end_time: '',
        state: 3,
      },
      selects: [],
      tableheaders: [],
      //详情页返回保留搜索数据
      corssPageData: localStorage.getItem('corssPageData') ? JSON.parse(localStorage.getItem('corssPageData')) : {},
      userList: [],
      warningList: [],
      order_no:'',
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path != '/cms/productionorderlist/productionsorder/Decorationlist') {
        localStorage.removeItem('corssPageData')
      } else {
        vm.firstEnter = 1
      }
    });
  },
  beforeRouteLeave (to, from, next) {
    if (to.path == '/cms/productionorderlist/productionsorder/Decorationlist') {
      this.corssPageData.page_index = this.page_index,
        this.corssPageData.page_size = this.page_size,
        localStorage.setItem('corssPageData', JSON.stringify(this.corssPageData))
    } else {
      localStorage.removeItem('corssPageData')
    }
    next(vm => {
    });
  },
  created () {
    // 获取用户列表
    this.axios({ method: 'get', url: '/api/user', }).then((res) => { this.userList = res.data.data }).catch((err) => { });
    // 获取紧急程度
    this.axios.get('/api/warning_list').then(res => { this.warningList = res.data.data })
  },
  computed: {
    ...mapState(['persimissionData']),
    computedTable () {
      // if (this.tableheaders.length < 1) {
      return this.tableColums
      // }
      // return this.func.computedHeader(this.tableheaders, this.tableColums)
    },
    set_list () {
      return [
        { title: '项目编号', name: 'Input', serverName: 'order_no', placeholder: '请输入订单编号', value: '' },
        { title: '项目名称', name: 'Input', serverName: 'residential_name', placeholder: '请输入项目名称', value: '' },
        // {
        //   title: '订单类型', name: 'Select', serverName: 'order_type', placeholder: '请选择', value: '',
        //   option: [
        //     { label: '工装', value: 1 },
        //     { label: '家装', value: 0 }
        //   ]
        // },
        // {
        //   title: '测量人员', name: 'Select', serverName: 'type', optionName: 'nickname', optionValue: 'id', placeholder: '请选择', value: '',
        //   option: this.userList
        // },
        // { title: '客户名字', name: 'Input', serverName: 'client_name', placeholder: '请输入', value: '' },
        // { title: '手机号', name: 'Input', serverName: 'mobile', placeholder: '请输入', value: '' },
        { title: '紧急程度', name: 'Select', serverName: 'warning_state', placeholder: '请选择', value: '', optionName: 'title', optionValue: 'id', option: this.warningList },
        {
          title: '生产状态', name: 'Select', placeholder: '请选择', serverName: 'state', value: '',
          option: [
            { label: '未下计划', value: 0 },
            { label: '计划中', value: 1 },
            { label: '计划完成', value: 2 },
          ]
        },
        { title: '下单日期范围', name: 'Input', start_server: 'start_time', end_server: 'end_time', start_value: '', end_value: '', isDate: true, serverName: 'id2', start_placeholder: '开始日期', end_placeholder: '结束日期' },
      ]
    }
  },
  methods: {
      timeFocus(e,row){
      if(e){
          let ids = [];
           this.axios.post('/api/bst_get_plan_time',{type:0,id:[row.id],ids,order_no:this.planInfo.order_no}).then(res=>{
          if(res.code == 200){
             let time = [];
             res.data.forEach(v=>{
                 time.push(v*1000);
             })
            //  console.log(Date.parse(new Date()))
              this.options = {
        disabledDate(date) {
          return date && (date.valueOf() < time[0]||date.valueOf()>time[1]);
        }
      }
          }
        })
      }
    },
      finishDataTrue(){
      let arr = [];
      this.basics_procedure_list.forEach(m=>{
       let obj = {};
       obj.id = m.id;
       obj.start_time =Date.parse(m.time[0]).toString().slice(0,10)||'';
      obj.end_time =Date.parse(m.time[1]).toString().slice(0,10)||'';
      arr.push(obj);
      })
      console.log(arr);
        this.axios.post('/api/orders_plan',{order_no:this.planInfo.order_no,time_list:{...arr}}).then(res=>{
           if(res.code==200){
             this.$Message.success(res.msg);
             this.show=false;
             this.getData(this.proxyObj);
           }
        })
    },
    // sendPlanInfo(){
    //       if (!this.time[0]) {
    //     return this.$Message.error('请选择起始时间')
    //   }
    //        if (this.time.length > 0) {
    //     this.planInfo.start_time = new Date(this.time[0]).toLocaleDateString().replace(/\//g, "-")
    //     this.planInfo.end_time = new Date(this.time[1]).toLocaleDateString().replace(/\//g, "-")
    //   }
    //     let url = '/api/orders_plan';
    //   this.axios.post(url, this.planInfo).then(res => {
    //     if (res.code == 200) {
    //       this.$Message.success(res.msg)
    //       this.show = false
    //        this.getData(this.proxyObj)
    //     }
    //   })
    // },
    del(row){
       this.axios.get('/api/orders_produce_order_del',{params:{order_no:row.order_no}}).then(res=>{
         if(res.code == 200){
           this.$Message.success(res.msg);
           this.getData(this.proxyObj)
         }
       })
    },
    init (row) {
      // row.page_index = this.page_index;
      // row.page_size = this.page_size;
      if (this.firstEnter == 1) {
        this.corssPageData = JSON.parse(localStorage.getItem('corssPageData'))
        row = this.corssPageData
        this.proxyObj = row
        this.searchData(row)
      } else {
        this.page_index = 1
        row.page_index = this.page_index;
        row.page_size = this.page_size;
        this.proxyObj = row
        this.getData(row)
      }
    },
    searchData (row) {
      if (this.firstEnter == 1) {
        this.page_index = this.corssPageData.page_index;
        this.page_size = this.corssPageData.page_size;
        this.set_list[0].value = this.corssPageData.order_no
        // this.set_list[1].value = this.corssPageData.type
        this.set_list[1].value = this.corssPageData.client_name
        // this.set_list[3].value = this.corssPageData.mobile
        this.set_list[2].value = this.corssPageData.warning_state
        this.set_list[3].value = this.corssPageData.state
        this.set_list[4].start_value = this.corssPageData.start_time ? this.corssPageData.start_time : ''
        this.set_list[4].end_value = this.corssPageData.end_time ? this.corssPageData.end_time : ''
        this.corssPageData.type = this.$route.query.type
        this.getData(this.corssPageData)
      } else {
        this.page_index = 1
        row.page_index = this.page_index;
        row.page_size = this.page_size;
        this.corssPageData.order_no = this.set_list[0].value
        // this.corssPageData.type = this.set_list[1].value
        this.corssPageData.client_name = this.set_list[1].value
        // this.corssPageData.mobile = this.set_list[2].value
        this.corssPageData.warning_state = this.set_list[2].value
        this.corssPageData.state = this.set_list[3].value
        this.corssPageData.start_time = this.func.setDate(this.set_list[4].start_value)
        this.corssPageData.end_time = this.func.setDate(this.set_list[4].end_value)
        this.proxyObj = row
        this.getData(row)
      }
    },
    changePage (e) {
      this.page_index = e;
      this.proxyObj.page_index = this.page_index;
      this.getData(this.proxyObj)
    },
    changeSize (e) {
      this.page_size = e;
      this.proxyObj.page_size = this.page_size;
      this.getData(this.proxyObj)
    },
    getData (row) {
      this.axios('/api/orders_produce_order_list', { params: row }).then(res => {
        this.tableData = res.data.data;
        this.firstEnter++
        this.total = res.data.total;
        this.tableheaders = res.data.tableSet || []
      })
    },
    goDetial (row) {
      this.$router.push({
        path: '/cms/productionorderlist/productionsorder/bst_Decorationlist',
        query: {
          order_no: row.order_no,
          type: 'produce',
          oa_id:row.oa_id
        }
      })
    },
    openModal (row) {
       let order_no = [];
       let id = [];
      if (Array.isArray(row)) {
        if (row.length < 1) { return this.$Message.warning('请选择一项') }
        this.planInfo.order_no = row.reduce((pre, cur, idx) => `${pre}${cur.order_no}${idx == row.length - 1 ? '' : ','}`, '')
      row.forEach(v=>{
        order_no.push(v.order_no);
        id.push(v.id)
      })
      } else {
        this.planInfo.order_no = row.order_no;
        order_no.push(row.order_no);
        id.push(row.id)
      }
     
      
   this.axios.get('/api/basics_procedure_index').then(res=>{
     this.show = true;
         this.basics_procedure_list = res.data.data.filter(v=>{
           return v.type==1||v.type==4
         })
      })
   
    },
    goOriginalPage (row) {
      this.$router.push({
        path: '/cms/rawmateria/index',
        query: {
          order_no: row.order_no,
          type: 4,
          residential_name: row.residential_name
        }
      })
    },
    selectTable (e) {
      this.selects = e;
    },
    setupTableHeader () {
      this.tableheaders.length < 1 ? this.tableheaders = this.tableColums.reduce((pre, cur) => pre.concat(cur.key), []) : ''
      this.$setTableheader({
        list: this.tableColums,
        selects: this.tableheaders,
        then: (result) => {
          this.tableheaders = result
          this.axios.post('/api/update/table', { id: this.$route.query.id, result }).then(res => {
            if (res.code == 200) {
              this.$Message.success(res.msg)
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.pageSlotStyle {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>