admin/src/pages/system/newOrder/caseRecord/index.vue

<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click='handleAdd'>新增</el-button>
        </div>
        <ul>
          <li>
            <!-- <span>选择案场：</span> -->
            <el-select v-model="CaseId" placeholder="请选择">
              <el-option
                key=""
                label="所有案场"
                value="">
              </el-option>
              <el-option
                v-for="item in cases"
                :key="item.CaseId"
                :label="item.CaseName"
                :value="item.CaseId">
              </el-option>
            </el-select>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary" @click="search">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table :data="records.list" stripe style="width: 100%">
        <el-table-column prop="CaseId" label="案场">
          <template slot-scope="scope">
            {{getCaseName(scope.row.CaseId)}}
          </template>
        </el-table-column>
        <el-table-column prop="Month" label="月份">
        </el-table-column>
        <el-table-column prop="Num" label="规定次数">
        </el-table-column>
        <el-table-column prop="ActrualNum" label="实际次数">
        </el-table-column>
        <el-table-column prop="OverNum" label="超出次数">
        </el-table-column>
        <el-table-column prop="LeftNum" label="剩余次数">
        </el-table-column>
        <el-table-column fixed='right' label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleReport(scope.row)">导出Excel</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="postData.page"
        :page-size="postData.pagesize"
        layout="prev, pager, next, jumper"
        :total="records.pagenum">
      </el-pagination>
    </div>
    <el-dialog
      title="新增月记录"
      :visible.sync="addVisible"
      width="500px"
      center>
      <div>
        <form class="mainForm">
          <ul>
            <li class="flex-h">
              <span>对应案场：</span>
              <div class="flex-item">
                <div style="width:50%">
                  <el-select v-model="detail.CaseId" placeholder="请选择">
                    <el-option
                      v-for="item in cases"
                      :key="item.CaseId"
                      :label="item.CaseName"
                      :value="item.CaseId">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </li>
            <li class="flex-h">
              <span>月份：</span>
              <div class="flex-item">
                <div style="width:50%">
                  <el-date-picker
                    v-model="detail.Month"
                    type="month"
                    placeholder="选择月">
                  </el-date-picker>
                </div>
              </div>
            </li>
            <li class="flex-h">
              <span>规定次数：</span>
              <div class="flex-item">
                <div style="width:50%">
                  <el-input v-model="detail.Num" placeholder="请输入规定次数"></el-input>
                </div>
              </div>
            </li>
          </ul>
        </form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapRecordState, mapActions: mapRecordActions } = createNamespacedHelpers('caserecord')
const { mapState: mapOrdersState, mapActions: mapOrdersActions } = createNamespacedHelpers('goodsorder')

export default {
  name: '',
  data () {
    return {
      addVisible: false,
      excelData: [],
      detail: {
        CaseId: '',
        Month: '',
        Num: 0,
      },
      postData: {
        caseid: '',
        page: 1,
        pagesize: 10,
      }
    }
  },
  computed: {
    ...mapState({
      cases: x => x.app.cases.list,
      defaultCaseId: x => x.app.cases.default
    }),
    ...mapRecordState({
      records: x => x.recordList,
    }),
    ...mapOrdersState({
      orders: x => x.recordOrders,
    }),
    CaseId: {
      get () {
        return this.postData.caseid || this.defaultCaseId
      },
      set (val) {
        this.postData.caseid = val
      }
    },
  },
  methods: {
    ...mapRecordActions([
      'GetRecordList',
      'AddRecord',
    ]),
    ...mapOrdersActions([
      'GetOrdersByRecord',
    ]),
    getCaseName (caseid) {
      return ((this.cases.filter(x => x.CaseId === caseid) || [])[0] || {}).CaseName
    },
    search () {
      this.getList()
    },
    submit () {
      if (this.detail.CaseId === '') {
        this.$message({
          type: 'error',
          message: '请先选择对应案场！'
        })
        return
      }
      if (this.detail.Month === '') {
        this.$message({
          type: 'error',
          message: '请先选择月份！'
        })
        return
      }
      if (this.detail.Num <= 0) {
        this.$message({
          type: 'error',
          message: '请输入规定次数！'
        })
        return
      }
      this.AddRecord({ ...this.detail, callback: this.afterSave, Month: this.toolClass.dateFormat(this.detail.Month, 'yyyy-MM') })
    },
    afterSave () {
      this.$message({
        type: 'success',
        message: '保存成功！'
      })
      this.addVisible = false
      this.getList()
    },
    getList () {
      this.GetRecordList({ ...this.postData, caseid: this.CaseId })
    },
    handleCurrentChange (val) { // 跳转到分页
      this.postData.page = val
      this.getList()
    },
    handleReport (row) {
      // this.GetOrdersByRecord({id: row.RecordId, callback: this.ordersExport})
      window.location.href = `${this.toolClass.ReplaceOrg(this.$api.goodsOrder.getOrdersByRecord.url.replace(':id', row.RecordId))}?token=${localStorage.getItem('JWT')}`
    },
    handleAdd () {
      this.detail = {
        CaseId: '',
        Month: '',
        Num: 0,
      }
      this.addVisible = true
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>