jf-frock/src/views/MountOrder/index.vue

<template>
  <div>
    <FullPage title='安装订单列表'
              :list='set_list'
              @init='init'
              :loading='loading'
              @searchData='init'
              @changePage='changePage'
              @changeSize='changeSize'
              :tableColums='computedTable'
              :tableData='tableData'
              :pageIndex='pageIndex'
              :total='total'>
      <!-- <div slot='titleButton'>
                <Button v-if='persimissionData["批量确认"]||persimissionData.all' @click="setupTableHeader"  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='set'
                slot-scope='{row}'>
        <div>
          <a v-if='persimissionData["详情"]||persimissionData.all'
             style="margin:0 5px"
             @click="goPage(row)">详情</a>
          <a style="margin:0 5px"
             @click="goUnusualPage(row)">查看异常</a>
        </div>
      </template>
    </FullPage>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    let _this = this;
    return {
      title: '',
      tableColums: [
        { title: '订单编号', align: 'center', key: 'order_no', fixed: 'left', width: '200' },
        {
          title: '订单类型', align: 'center', key: 'type', minWidth: 150,
          render: (h, params) => h('span', {}, params.row.type == 1 ? '工装' : '家装')
        },
        { title: '客户', align: 'center', key: 'client_name', minWidth: 150 },
        { title: '手机号', align: 'center', key: 'mobile', minWidth: 150 },
        { title: '地址', align: 'center', key: 'address', minWidth: 150 },
        { title: '项目名称', align: 'center', key: 'residential_name', minWidth: 200 },
        {
          title: '出库时间', align: 'center', key: 'predict_time', minWidth: 200,
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.transport_start_time))
        },
        {
          title: '运输时间', align: 'center', key: 'crt_time', minWidth: 200,
          render: (h, params) => h('span', {}, this.func.replaceDate(params.row.transport_end_time))
        },
        { title: '操作', align: 'center', slot: 'set', fixed: 'right', width: '150' },
      ],
      tableData: [],
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      loading: false,
      tableheaders: [],
      warningList: []
    }
  },
  created () {
    // 获取紧急程度
    this.axios.get('/api/warning_list').then(res => { this.warningList = res.data.data })
  },
  mounted () {

  },
  watch: {
    $route (to, from) {
      this.type = to.query.type ? to.query.type : '';
      this.getData(this.proxyObj)
    }
  },
  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: 'type', 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: 'Input', serverName: 'client_name', placeholder: '客户', value: '' },
        { title: '手机号', name: 'Input', serverName: 'mobile', placeholder: '手机号', value: '' },
        { title: '出库时间', name: 'Input', start_server: 'start_out_storage_time', end_server: 'end_out_storage_time', start_value: '', end_value: '', isDate: true, start_placeholder: '开始日期', end_placeholder: '结束日期' },
        { title: '运输时间', name: 'Input', start_server: 'start_transport_time', end_server: 'end_transport_time', start_value: '', end_value: '', isDate: true, start_placeholder: '开始日期', end_placeholder: '结束日期' },
        { title: '下单日期范围', name: 'Input', start_server: 'start_time', end_server: 'end_time', start_value: '', end_value: '', isDate: true, start_placeholder: '开始日期', end_placeholder: '结束日期' },
      ]
    }
  },
  methods: {
    init (row) {
      this.pageIndex = 1
      row.page_index = this.pageIndex;
      row.page_size = this.pageSize;
      this.proxyObj = row
      this.getData(row)
    },
    changePage (e) {
      this.pageIndex = e;
      this.proxyObj.page_index = this.pageIndex;
      this.getData(this.proxyObj)
    },
    changeSize (e) {
      this.pageSize = e;
      this.proxyObj.page_size = this.pageSize;
      this.getData(this.proxyObj)
    },
    getData (row) {
      this.loading = true;
      this.axios('/api/orders_install_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 || []
        }
      })
    },
    goPage (row) {
      this.$router.push({
        path: '/cms/mountorder/details',
        query: {
          order_no: row.order_no,
          type: 3
        }
      })
    },
    goUnusualPage (row) {
      this.$router.push({
        path: '/cms/mountorder/unusual',
        query: {
          order_no: row.order_no,
          type: 3
        }
      })
    },
    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>
</style>