BST_bigScreen/src/views/ProductionOrderList/Dispatchlist/list.vue

<template>
  <div>
    <FullPage title='派工单'
              :list='set_list'
              @init='init'
              @searchData='init'
              @changePage='changePage'
              @changeSize='changeSize'
              :loading='loading'
              :tableColums='computedTable'
              :tableData='tableData'
              :showPage='false'
              :page_index='page_index'
              :total='total'>
      <div slot='titleButton'>
        <!-- <Button v-if='persimissionData["批量打印"]||persimissionData.all'
                type="primary"
                ghost>批量打印</Button> -->
      </div>
      <div slot='navButton'>
        <Button v-if='persimissionData["表头设置"]||persimissionData.all'
                @click="setupTableHeader"
                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'
             class="map-margin"
             @click="goOriginalPage(row)">原材料预算</a>
          <!-- <a v-if='persimissionData["打印派工单"]||persimissionData.all'
             class="map-margin">打印派工单</a> -->
          <a v-if='persimissionData["详情"]||persimissionData.all'
             class="map-margin"
             @click="goDetial(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: [
        { title: '项目编号', align: 'center', key: 'order_no', fixed: 'left', width: '200' },
        // {
        //   title: '订单类型', align: 'center', key: 'renovation_type', minWidth: 150,
        //   render: (h, params) => h('span', {}, params.row.renovation_type == 1 ? '工装' : '家装')
        // },

        
        { title: '项目名称', align: 'center', key: 'residential_name', minWidth: 200 },
        { title: '紧急程度', align: 'center', key: 'warning_state', minWidth: 100, slot: 'basicTypeSet', },
        {
          title: '派工开始时间', align: 'center', key: 'start_time', minWidth: 200,
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.start_time * 1, 1))
        },
        {
          title: '派工结束时间', align: 'center', key: 'end_time', minWidth: 200,
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.end_time * 1, 1))
        },
        // { title: '派工人员', align: 'center', key: 'nickname', minWidth: 200 },
        {
          title: '预估工期', align: 'center', key: 'predict_time', minWidth: 200,
          render: (h, params) => h('span', `${(params.row.predict_time / 8).toFixed(1)}天`)
        },
        { title: '操作', align: 'center', key: 'set', slot: 'set', fixed: 'right', width: '240' },
      ],
      tableData: [],
      page_index: 1,
      page_size: 10,
      total: 0,
      proxyObj: {},
      loading: false,
      tableheaders: [],
      //详情页返回保留搜索数据
      corssPageData: {},
      warningList: [],
      userList: []
    }
  },
  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: '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: '结束日期' },
        // {
        //   title: '订单类型', name: 'Select', serverName: 'renovation_type', placeholder: '请选择订单类型', value: '',
        //   option: [
        //     { label: '工装', value: 1 },
        //     { label: '家装', value: 0 },
        //   ]
        // },
        { title: '紧急程度', name: 'Select', serverName: 'warning_state', placeholder: '请选择', value: '', optionName: 'title', optionValue: 'id', option: this.warningList },
        { title: '项目名称', name: 'Input', serverName: 'residential_name', placeholder: '请输入项目名称', value: '' },
        // {
        //   title: '派工人员', name: 'Select', serverName: 'user_id', placeholder: '请选择派工人员', optionName: 'nickname', optionValue: 'id', value: '',
        //   option: this.userList
        // },
      ]
    }
  },
  created () {
    // 获取紧急程度
    this.axios.get('/api/warning_list').then(res => { this.warningList = res.data.data })
    // 获取用户列表
    this.axios({ method: 'get', url: '/api/employee_list', }).then((res) => { this.userList = res.data }).catch((err) => { });
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.path != '/cms/productionorderlist/dispatchlist/confirm') {
        localStorage.removeItem('corssPageData')
      } else {
        vm.firstEnter = 1
        vm.page_index = JSON.parse(localStorage.getItem('corssPageData')).page_index
        vm.page_size = JSON.parse(localStorage.getItem('corssPageData')).page_size
      }
    });
  },
  beforeRouteLeave (to, from, next) {
    if (to.path == '/cms/productionorderlist/dispatchlist/confirm') {
      this.corssPageData = {
        'order_no': this.set_list[0].value,
        'state': this.set_list[1].value,
        'start_time': this.set_list[2].start_value,
        'end_time': this.set_list[2].end_value,
        // 'renovation_type': this.set_list[3].value,
        'warning_state': this.set_list[3].value,
        'residential_name': this.set_list[4].value,
        // 'user_id': this.set_list[6].value,
        'page_index': this.page_index,
        'page_size': this.page_size
      }
      localStorage.setItem('corssPageData', JSON.stringify(this.corssPageData))
    }
    next(vm => {
    });
  },
  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.set_list[0].value = row.order_no
        this.set_list[1].value = row.state
        this.set_list[2].value = row.start_time
        this.set_list[2].value = row.end_time
        // this.set_list[3].value = row.renovation_type
        this.set_list[3].value = row.warning_state
        this.set_list[4].value = row.residential_name
        // this.set_list[6].value = row.user_id
        this.firstEnter++
        this.$nextTick(() => {
          this.page_index = row.page_index
          this.page_size = row.page_size
        })
      } else {
        this.proxyObj = row
      }
      this.getData(row)
    },
    getData (row) {
      this.loading = true;
      this.axios('/api/orders_dispatch_list', { params: row }).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.tableheaders = res.data.tableSet || []
        }
      })
    },
    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)
    },
    goDetial (row) {
      console.log(1)
      this.$router.push({
        // path:'/cms/productionorderlist/dispatchlist/details',
        path: '/cms/productionorderlist/dispatchlist/confirm',
        query: {
          order_no: row.order_no,
        }
      })
    },
    goOriginalPage (row) {
      this.$router.push({
        path: '/cms/rawmateria/index',
        query: {
          order_no: row.order_no,
          type: 6,
          residential_name: row.residential_name
        }
      })
    },
    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>