web-admin/src/views/selfShop/goods/spec.vue

<template>
  <div id="spec">
    <template v-if="view === 'list'">
      <el-row>
        <el-col :span="24" style="padding: 10px">
          <el-button icon="el-icon-back" size="mini" @click="toBack()">返回</el-button>
        </el-col>
      </el-row>
      <data-search :fields="searchFields" v-model="searchInfo" @query="search">
        <template #status>
          <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
        </template>
      </data-search>
      <data-btn :fields="btnFields" @add="toAdd" />
      <data-table ref="dataTable" :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search">
        <template #code="{ row, item }">
          <el-link type="primary" @click="toData(row)">{{ row[item.model] }}</el-link>
        </template>
      </data-table>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="24">
          <el-button icon="el-icon-back" size="mini" @click="toBackList()">返回</el-button>
        </el-col>
        <el-col :span="24">
          <data-form :span="12" :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #status>
              <el-option v-for="i in statusList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #can_group>
              <el-option v-for="i in tfList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
// 找到该商品下的规格定义
const _ = require('lodash');
import methodUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('goodsSpec');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'spec',
  props: {},
  components: {},
  data: function () {
    return {
      view: 'list',
      fields: [
        { label: '规格名称', model: 'name' },
        { label: '库存', model: 'num' },
        { label: '实际销售价格', model: 'sell_money' },
        { label: '划掉销售价格', model: 'flow_money' },
        { label: '运费', model: 'freight' },
        { label: '状态', model: 'status', format: (i) => (i === '0' ? '使用中' : '已禁用') },
        {
          label: '是否可以团购',
          model: 'can_group',
          format: (i) => {
            let data = this.tfList.find((f) => f.value == i);
            if (data) return data.label;
            else return '暂无';
          },
        },
        { label: '团购金额', model: 'group_config.money' },
        { label: '开团人数', model: 'group_config.need_person' },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
      ],
      list: [],
      total: 0,
      limit: 10,
      btnFields: [{ label: '添加', method: 'add' }],
      defaultSearch: {},
      searchInfo: {},
      searchFields: [
        { label: '规格名称', model: 'name' },
        { label: '状态', model: 'status', type: 'select' },
      ],
      infoFields: [
        { label: '规格名称', model: 'name' },
        { label: '库存', model: 'num', type: 'number' },
        { label: '实际销售价格', model: 'sell_money', type: 'number' },
        { label: '划掉销售价格', model: 'flow_money', type: 'number' },
        { label: '运费', model: 'freight', type: 'number' },
        { label: '状态', model: 'status', type: 'select' },
        { label: '是否可以团购', model: 'can_group', type: 'select' },
        { label: '团购金额', model: 'money', type: 'number' },
        { label: '开团人数', model: 'need_person', type: 'number' },
      ],
      rules: {},
      form: {},

      statusList: [],
      // 是否可以团购
      tfList: [],
    };
  },
  computed: {
    ...mapState(['user']),
    goods() {
      return this.$route.params.id;
    },
  },
  created() {
    this.defaultSearch.goods = this.goods;
    this.searchOthers();
    this.search();
  },
  methods: {
    ...dictData({ getDict: 'query' }),
    ...mapActions(['query', 'fetch', 'update', 'delete', 'create']),
    ...methodUtil,
    initAddData() {
      const obj = { goods: this.goods, status: '0', can_group: '0' };
      this.$set(this, 'form', obj);
    },
    async toSave({ data }) {
      let group_config = {};
      group_config.money = data.money;
      group_config.need_person = data.need_person;
      data.group_config = group_config;
      let res;
      if (data.id) res = await this.update(data);
      else res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.search();
        this.toBackList();
      }
    },
    async toEdit({ data }) {
      const res = await this.fetch(data._id);
      if (this.$checkRes(res)) {
        let data = res.data;
        const group_config = _.get(data, 'group_config', {});
        data = { ...data, ...group_config };
        delete data.group_config;
        this.$set(this, `form`, data);
        this.view = 'info';
      } else {
        this.$message.error('未找到指定数据');
      }
    },
    toBack() {
      window.history.go('-1');
    },
    toBackList() {
      this.view = 'list';
      this.form = {};
    },
    async searchOthers() {
      // 状态
      let res = await this.getDict({ code: 'status' });
      if (this.$checkRes(res)) this.$set(this, 'statusList', res.data);
      // 是否可以团购
      res = await this.getDict({ code: 'tf' });
      if (this.$checkRes(res)) this.$set(this, 'tfList', res.data);
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>