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

<template>
  <div id="goods">
    <template v-if="view === 'list'">
      <data-search :fields="searchFields" v-model="searchInfo" @query="search">
        <template #status>
          <el-option v-for="i in goodsStatusList" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </template>
      </data-search>
      <data-btn :fields="btnList" @add="toAdd"></data-btn>
      <data-table
        ref="dataTable"
        :fields="fields"
        :opera="opera"
        :data="list"
        :total="total"
        :limit="limit"
        @query="search"
        @edit="toEdit"
        @delete="toDelete"
        @spec="toSpec"
      ></data-table>
    </template>
    <template v-else>
      <el-row>
        <el-col :span="24">
          <el-button icon="el-icon-back" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24">
          <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #tags="{ item }">
              <el-cascader v-model="form[item.model]" :options="tagsList" :props="props" clearable filterable :show-all-levels="false"></el-cascader>
            </template>
            <template #status>
              <el-option v-for="i in goodsStatusList" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
const _ = require('lodash');
import methodsUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: selfShop } = createNamespacedHelpers('selfShop');
const { mapActions: goods } = createNamespacedHelpers('goods');
const { mapActions: goodsTags } = createNamespacedHelpers('goodsTags');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    return {
      view: 'list',
      fields: [
        { label: '商品名称', model: 'name' },
        { label: '店铺名称', model: 'shop.name' },
        { label: '商品标签', model: 'tags', format: (i) => this.getTags(i) },
        { label: '商品状态', model: 'status', format: (i) => this.getStatus(i) },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '库存管理', method: 'spec' },
        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
      ],
      btnList: [{ label: '添加', method: 'add' }],
      searchFields: [
        { label: '商品名称', model: 'name' },
        { label: '商品状态', model: 'status', type: 'select' },
      ],
      searchInfo: {},
      list: [],
      total: 0,
      limit: 10,
      // info部分
      infoFields: [
        { label: '商品名称', model: 'name' },
        { label: '商品标签', model: 'tags', custom: true },
        { label: '简短简介', model: 'shot_brief', maxLength: 50 },
        { label: '预计发货时间', model: 'send_time' },
        { label: '商品图片', model: 'file', type: 'upload', url: '/files/point/goods/upload' },
        { label: '商品介绍', model: 'brief', type: 'textarea' },
        { label: '商品状态', model: 'status', type: 'select' },
      ],
      rules: {},
      form: {},

      tagsList: [],
      goodsStatusList: [],
      props: { multiple: true, label: 'label', value: 'code' },

      shop: {},
    };
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...dictData({ getDict: 'query' }),
    ...goodsTags(['tree']),
    ...selfShop(['getInfo', 'getGoods', 'goodsCreate']),
    ...goods(['delete', 'fetch', 'update', 'create']),
    ...methodsUtil,
    async search({ skip = 0, limit = this.limit, ...others } = {}) {
      let query = { skip, limit, ...others };
      if (Object.keys(this.searchInfo).length > 0) query = { ...query, ...this.searchInfo };
      const res = await this.getGoods(query);
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    initAddData() {
      const obj = {
        // tags: [],
        status: '1',
        shop: _.get(this.shop, '_id'),
      };
      this.$set(this, 'form', obj);
    },
    async searchOthers() {
      let res = await this.tree();
      if (this.$checkRes(res)) this.$set(this, `tagsList`, res.data);
      res = await this.getDict({ code: 'goods_status' });
      if (this.$checkRes(res)) this.$set(this, `goodsStatusList`, res.data);
      res = await this.getInfo();
      if (this.$checkRes(res)) this.$set(this, `shop`, res.data);
    },
    getStatus(data) {
      const res = this.goodsStatusList.find((f) => f.value === data);
      if (res) return res.label;
      return '';
    },
    getTags(data) {
      let list = this.tagsList;
      const getChildren = (list) =>
        list.map((i) => {
          if (i.children) return getChildren(i.children);
          return i;
        });
      list = _.flattenDeep(getChildren(list));
      const arr = [];
      for (const ts of data) {
        const last = _.last(ts);
        const r = list.find((f) => f.code === last);
        if (r) arr.push(r.label);
      }
      return arr.join(';');
    },
    toSpec({ data }) {
      console.log(data);
    },
  },
};
</script>

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