smsb-web-develop/src/views/realm/ai-stock/Stock.vue

<template>
  <schema-table
    ref="table"
    :schema="schema"
  >
    <confirm-dialog
      ref="addDialog"
      title="新增库存"
      @confirm="onSave"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label">类型：</span>
        <schema-select
          v-model="credit.auditType"
          :schema="auditTypeSchema"
        />
        <span class="c-grid-form__label">次数：</span>
        <el-input-number
          v-model="credit.initialAmount"
          :min="1"
          :max="999999"
          step-strictly
        />
        <span class="c-grid-form__label required">有效期：</span>
        <el-date-picker
          v-model="credit.date"
          class="u-width--auto"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </div>
    </confirm-dialog>
    <credit-config-dialog ref="creditDialog" />
  </schema-table>
</template>

<script>
import {
  getCredits,
  addCredit,
  deleteCredit
} from './api'
import CreditConfigDialog from './components/CreditConfigDialog'

export default {
  name: 'AIStock',
  components: {
    CreditConfigDialog
  },
  data () {
    const auditTypeOptions = [
      { value: 1, label: '图片' },
      { value: 2, label: '视频' }
    ]

    return {
      auditTypeSchema: {
        options: auditTypeOptions
      },
      schema: {
        condition: { auditType: void 0 },
        list: getCredits,
        buttons: [
          { type: 'add', on: this.onAdd },
          { label: '阈值配置', on: this.onConfig }
        ],
        filters: [
          { key: 'auditType', type: 'select', placeholder: '全部类型', options: auditTypeOptions }
        ],
        cols: [
          { label: '审核类型', render (data) {
            return ['', '图片', '视频'][data.auditType]
          } },
          { prop: 'effectiveDate', label: '生效日期' },
          { prop: 'expiryDate', label: '结束日期' },
          { prop: 'initialAmount', label: '总次数' },
          { prop: 'remaining', label: '剩余次数' },
          { prop: 'allocatedAmount', label: '已分配' },
          { label: '可分配', render ({ initialAmount, allocatedAmount }) {
            return (initialAmount - allocatedAmount).toString()
          } },
          { type: 'invoke', render: [
            { label: '删除', on: this.onDel }
          ] }
        ]
      },
      credit: {}
    }
  },
  methods: {
    onAdd () {
      this.credit = {
        auditType: 1,
        initialAmount: 1000,
        date: ''
      }
      this.$refs.addDialog.show()
    },
    onSave (done) {
      const { auditType, initialAmount, date } = this.credit
      if (!date) {
        this.$message({
          type: 'warning',
          message: '请选择有效期'
        })
        return
      }
      addCredit({
        admin: 1,
        auditType,
        initialAmount,
        effectiveDate: date[0],
        expiryDate: date[1]
      }).then(() => {
        done()
        this.$refs.table.pageTo(1)
      })
    },
    onDel (credit) {
      deleteCredit(credit).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onConfig () {
      this.$refs.creditDialog.show()
    }
  }
}
</script>