BST_bigScreen/src/views/ProductionOrderList/ProductionsOrder/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>1"
             @click="openModal(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>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      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: 'state', minWidth: 150,
          render: (h, params) => h('span', {},
            params.row.state == 0 ? '未下计划'
              : (params.row.state == 1 ? '计划中'
                : (params.row.state == 2 ? '计划完成' : '全部'))
          )
        },
        { title: '项目名称', align: 'center', key: 'residential_name', minWidth: 200 },
        { 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: [],
    }
  },
  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: 99 },
            { 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: {
    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[2].value = this.corssPageData.client_name
        this.set_list[3].value = this.corssPageData.mobile
        this.set_list[4].value = this.corssPageData.warning_state
        this.set_list[5].value = this.corssPageData.state
        this.set_list[6].start_value = this.corssPageData.start_time ? this.corssPageData.start_time : ''
        this.set_list[6].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[2].value
        this.corssPageData.mobile = this.set_list[3].value
        this.corssPageData.warning_state = this.set_list[4].value
        this.corssPageData.state = this.set_list[5].value
        this.corssPageData.start_time = this.func.setDate(this.set_list[6].start_value)
        this.corssPageData.end_time = this.func.setDate(this.set_list[6].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/Decorationlist',
        query: {
          order_no: row.order_no,
          type: 'produce'
        }
      })
    },
    openModal (row) {
      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 ? '' : ','}`, '')
      } else {
        this.planInfo.order_no = row.order_no;
      }
      this.downProduction({
        title: '下生产计划',
        type: 1,
        params: this.planInfo,
        then: (e) => { this.getData(this.proxyObj) },
        cancel: (e) => { },
      })
    },
    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>