web-admin/src/views/zr/zrGoods/index.vue

<template>
  <div id="goods">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <span v-if="view === 'list'">
          <el-col :span="24" class="one"> <span>尊荣商品</span> </el-col>
          <data-search :fields="searchFields" v-model="searchInfo" @query="search">
            <template #status>
              <el-option v-for="i in statusList" :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"
            @query="search"
            @edit="toEdit"
            @puton="toPuton"
            @delete="toDelete"
          ></data-table>
        </span>
        <el-row v-if="view === 'info'">
          <el-col :span="24" style="margin: 0 0 10px 0">
            <el-col :span="2"><el-button type="primary" size="mini" @click="toBack()">返回</el-button></el-col>
            <el-col :span="2"><el-button type="primary" size="mini" @click="toSave(form)">保存</el-button></el-col>
          </el-col>
          <el-col :span="24">
            <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
              <template #status>
                <el-option v-for="i in statusList" :key="i.value" :label="i.label" :value="i.value"></el-option>
              </template>
              <template #brief>
                <editor v-model="form.brief" url="/files/point/zrGoods/upload" />
              </template>
            </data-form>
          </el-col>
        </el-row> </el-col
    ></el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import methodsUtil from '@/util/opera';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: zrGoods } = createNamespacedHelpers('zrGoods');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'index',
  props: {},
  components: { editor: () => import('@/components/editor.vue') },
  data: function () {
    return {
      loadings: true,
      view: 'list',
      fields: [
        { label: '商品名称', model: 'name', showTip: false },
        { label: '店铺名称', model: 'shop.name' },
        { label: '商品库存', model: 'num' },
        { label: '商品状态', model: 'status', format: (i) => this.getStatus(i) },
        { label: '排序', model: 'sort' },
      ],
      opera: [
        { label: '修改', method: 'edit' },
        { label: '上架', method: 'puton', display: (i) => i.status == '0' },
        { label: '下架', method: 'puton', display: (i) => i.status == '1' },
        { label: '删除', method: 'delete', confirm: true, type: 'danger' },
      ],
      btnList: [{ label: '添加', method: 'add' }],
      searchFields: [
        { label: '商品名称', model: 'name' },
        { label: '商品状态', model: 'status', type: 'select' },
      ],
      searchInfo: {},
      list: [],
      total: 0,
      // info部分
      infoFields: [
        { label: '商品名称', model: 'name' },
        { label: '简短简介', model: 'shot_brief', maxLength: 50 },
        { label: '预计发货时间', model: 'send_time' },
        { label: '商品状态', model: 'status', type: 'select' },
        { label: '商品库存', model: 'num', type: 'number' },
        { label: '排序', model: 'sort', type: 'number' },
        { label: '消耗尊荣', model: 'cost', type: 'number' },
        { label: '商品图片', model: 'file', type: 'upload', url: '/files/point/zrGoods/upload' },
        { label: '商品介绍', model: 'brief', custom: true },
      ],
      rules: {},
      form: {},
      props: { multiple: true, label: 'label', value: 'code' },
      statusList: [],
    };
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...dictData({ getDict: 'query' }),
    ...zrGoods(['query', '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 };
      // 判断是否是个人店铺查询
      if (this.user.role.code == 'shopAdmin') query.shop = this.user.shop._id || this.user.shop.id;
      const res = await this.query(query);
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
      this.loadings = false;
    },
    // 添加自定义
    initAddData() {
      const obj = { status: '1', shop: _.get(this.user.shop, '_id') };
      if (this.user.role.code == 'shopAdmin' && !obj.shop) obj.shop = this.user.shop._id || this.user.shop.id;
      this.$set(this, 'form', obj);
    },
    // 查询其他信息
    async searchOthers() {
      let res;
      res = await this.getDict({ code: 'goods_status' });
      if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
    },
    // 商品状态
    getStatus(data) {
      const res = this.statusList.find((f) => f.value === data);
      if (res) return res.label;
      return '';
    },
    // 保存
    async toSave({ data }) {
      let res;
      if (data == '' || data == undefined) {
        let form = this.form;
        if (form.id) res = await this.update(form);
        else res = await this.create(form);
      } else {
        if (data.id) res = await this.update(data);
        else res = await this.create(data);
      }
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.toBack();
        this.search();
      }
    },
    // 执行返回
    toBack() {
      this.form = {};
      this.view = 'list';
    },
    // 上架
    async toPuton({ data }) {
      this.$confirm('是否确认上架/下架该商品?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        if (data.status == '1') data.status = '0';
        else data.status = '1';
        let res;
        if (data.id) res = await this.update(data);
        if (this.$checkRes(res)) this.$message({ type: `success`, message: `修改成功` });
        this.search();
      });
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.one {
  margin: 0 0 10px 0;

  span:nth-child(1) {
    font-size: 20px;
    font-weight: 700;
    margin-right: 10px;
  }
}
.el-col {
  margin: 10px 0;
}
</style>