完成商城管理 发现问题：（列表渲染根据字典项改变，获取不到字典项，疑似渲染时字典未加载完成）

admin-frame/src/components/filterList/index.vue

@@ -29,6 +29,7 @@
 import tables from './table.vue';
 import search from './search.vue';
 import pagination from './pagination.vue';
+// import _ from 'lodash';
 export default {
   components: {
     tables,

admin-journal-intact/src/store/index.js

@@ -13,7 +13,6 @@ Vue.use(Vuex);
 const state = () => ({
   Total: 0,
   intactList: [],
-  columnList: [],
   dict: {}
 });
 

admin-journal-intact/src/views/home.vue

@@ -6,7 +6,7 @@
         <el-button style="float: right; padding: 3px 0" type="text" @click="addintact">添加期刊</el-button>
       </div>
       <div class="main">
-        <filterList ref="filterList" :tableData="intact" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
+        <filterList ref="filterList" :tableData="intactList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
       </div>
     </el-card>
     <dialogAndDrawer :width="'35%'" :title="title" :visibleSync="visibleSync" v-if="visibleSync" @close="visibleSync = false">
@@ -109,15 +109,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(['intactList', 'Total', 'columnList']),
-    intact() {
-      this.intactList.map(p => {
-        const findName = this.columnList.find(e => e.code == p.bind);
-        if (findName) p.bind = findName?.name;
-        return p;
-      });
-      return this.intactList;
-    }
+    ...mapState(['intactList', 'Total'])
   },
   async mounted() {
     await this.filterQuery();

admin-market/src/store/index.js

@@ -2,48 +2,88 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import $axios from '@lib/axios.js';
 const api = {
-  goodsCreate: '/api/goods/goods/create',
-  goodsUpdate: '/api/goods/goods/update',
-  goodsDelete: '/api/goods/goods/delete',
+  marketCreate: '/api/market/wares/create',
+  marketUpdate: '/api/market/wares/update',
+  marketDelete: '/api/market/wares/delete',
+  marketQuery: '/api/market/wares/query',
+  dictQuery: '/api/code/dictionary/query',
+  intactQuery: '/api/journal/intact/query',
+  intactFetch: '/api/journal/intact/fetch',
+  contentsQuery: '/api/cms/contents/query',
+  contentsFetch: '/api/cms/contents/fetch',
   goodsQuery: '/api/goods/goods/query',
   goodsFetch: '/api/goods/goods/fetch'
 };
 Vue.use(Vuex);
 const state = () => ({
   Total: 0,
-  goodsList: [],
-  columnList: [],
+  marketList: [],
+  typeList: [],
+  goodList: [],
   dict: {}
 });
 
 const actions = {
-  async goodsCreate ({ commit }, payload) {
-    const res = await $axios.post(api.goodsCreate, payload);
+  async marketCreate ({ commit }, payload) {
+    const res = await $axios.post(api.marketCreate, payload);
     return res;
   },
-  async goodsUpdate ({ commit }, payload) {
-    const res = await $axios.post(api.goodsUpdate, { ...payload, id: payload._id });
+  async marketUpdate ({ commit }, payload) {
+    const res = await $axios.post(api.marketUpdate, { ...payload, id: payload._id });
     return res;
   },
-  async goodsDelete ({ commit }, { id }) {
-    const res = await $axios.delete(`${api.goodsDelete}/${id}`);
+  async marketDelete ({ commit }, { id }) {
+    const res = await $axios.delete(`${api.marketDelete}/${id}`);
     return res;
   },
-  async goodsQuery ({ commit }, { filter, paging } = {}) {
-    const res = await $axios.get(api.goodsQuery, { ...filter, skip: paging.page, limit: paging.size });
-    commit('goodsQuery', res);
+  async marketQuery ({ commit }, { filter, paging } = {}) {
+    const res = await $axios.get(api.marketQuery, { ...filter, skip: paging.page, limit: paging.size });
+    commit('marketQuery', res);
     return res;
   },
-  async goodsFetch ({ commit }, payload) {
-    const res = await $axios.get(api.goodsFetch, payload);
+  async marketType ({ commit }) {
+    const res = await $axios.get(api.dictQuery, { parentCode: 'marketType' });
+    commit('marketType', res);
     return res;
+  },
+  async marketStatus ({ commit }) {
+    const res = await $axios.get(api.dictQuery, { parentCode: 'marketStatus' });
+    commit('marketStatus', res);
+    return res;
+  },
+  async goodQuery ({ commit }, { code }) {
+    let url = '';
+    if (code == 0) url = api.intactQuery;
+    if (code == 1) url = api.contentsQuery;
+    if (code == 2) url = api.goodsQuery;
+    const res = await $axios.get(url);
+    commit('goodList', res);
+    return res;
+  },
+  async goodFetch ({ commit }, { code, id }) {
+    let url = '';
+    if (code == 0) url = api.intactFetch;
+    if (code == 1) url = api.contentsFetch;
+    if (code == 2) url = api.goodsFetch;
+    const res = await $axios.get(url, { id });
+    return res?.data;
   }
 };
 
 const mutations = {
-  goodsQuery(state, payload) {
-    state.goodsList = payload.data;
+  marketQuery(state, payload) {
+    state.marketList = payload.data;
     state.Total = payload.total;
+  },
+  marketStatus(state, payload) {
+    state.dict.marketStatus = payload.data;
+  },
+  marketType(state, payload) {
+    state.typeList = payload.data;
+    state.dict.marketType = payload.data;
+  },
+  goodList(state, payload) {
+    state.goodList = payload.data;
   }
 };
 

admin-market/src/views/Home.vue

@@ -3,30 +3,45 @@
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <span>商城管理</span>
-        <el-button style="float: right; padding: 3px 0" type="text" @click="addgoods">上架商品</el-button>
+        <el-button style="float: right; padding: 3px 0" type="text" @click="addmarket">上架商品</el-button>
       </div>
       <div class="main">
-        <filterList ref="filterList" :tableData="goodsList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total"></filterList>
+        <filterList ref="filterList" :tableData="marketList" :filed="filed" @edit="filtereEdit" @delete="filterDelete" @query="filterQuery" :total="Total">
+          <template v-slot:search="{ item, formInline }">
+            <el-select clearable v-if="item.name == 'type'" v-model="formInline[item.name]" placeholder="请选择">
+              <el-option
+                v-for="i in dict.marketType"
+                :key="i.value"
+                :label="i.name"
+                :value="i.code">
+              </el-option>
+            </el-select>
+            <el-select clearable v-if="item.name == 'status'" v-model="formInline[item.name]" placeholder="请选择">
+              <el-option
+                v-for="i in dict.marketStatus"
+                :key="i.value"
+                :label="i.name"
+                :value="i.code">
+              </el-option>
+            </el-select>
+          </template>
+        </filterList>
       </div>
     </el-card>
     <dialogAndDrawer :width="'35%'" :title="title" :visibleSync="visibleSync" v-if="visibleSync" @close="visibleSync = false">
       <template v-slot:windowMain>
         <formData ref="formData" :filed="formfiled" :data="formdata" :rules="formrules" @save="formSave" v-if="visibleSync">
           <template v-slot:formItem="{ item, formdata }">
-            <!-- 富文本 -->
-            <editoritem v-if="item.name == 'content'" @change="editChage" :value="formdata[item.name]"></editoritem>
-            <!-- 缩略图 -->
-            <el-upload
-              v-if="item.name == 'thumbnail'"
-              class="avatar-uploader"
-              action="/api/files/avatar/upload"
-              :show-file-list="false"
-              :headers="myHeaders"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload">
-              <img v-if="formdata[item.name] && formdata[item.name] !== ''" :src="formdata[item.name]" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
+            <!-- 类型选择 -->
+            <el-select v-if="item.name == 'type'" v-model="formdata['type']" placeholder="请选择类型" @change="typeChange">
+              <el-option v-for="i in typeList" :key="i.code" :label="i.name" :value="i.code">
+              </el-option>
+            </el-select>
+            <!-- 商品选择 -->
+            <el-select v-if="item.name == 'bindId'" v-model="formdata['bindId']" placeholder="请选择商品" @change="goodChange">
+              <el-option v-for="i in goodList" :key="i._id" :label="i.name || i.title" :value="i._id">
+              </el-option>
+            </el-select>
           </template>
         </formData>
       </template>
@@ -37,81 +52,90 @@
 import filterList from '@components/filterList/index.vue';
 import dialogAndDrawer from '@components/dialogAndDrawer.vue';
 import formData from '@components/formData/index.vue';
-import editoritem from '@components/editoritem.vue';
 import { mapState, mapActions } from 'vuex';
-const token = sessionStorage.getItem('token');
 export default {
   components: {
     filterList,
     dialogAndDrawer,
-    formData,
-    editoritem
+    formData
   },
   data() {
     return {
+      typeCode: '',
       fileList: [],
-      myHeaders: { Authorization: token },
       title: '',
       visibleSync: false,
       filed: [
         { name: 'name', label: '名称', filter: true },
-        { name: 'type', label: '类型' },
-        { name: 'status', label: '状态' },
+        { name: 'type', label: '商品类型', formater: 'dslot', filter: true },
+        { name: 'status', label: '状态', formater: 'dslot', filter: true },
         { name: 'money', label: '价格' }
       ],
       formdata: {},
       formfiled: [
-        { name: 'thumbnail', label: '状态', formater: 'slot' },
-        { name: 'name', label: '标题' },
-        { name: 'describe', label: '描述' },
-        { name: 'content', label: '内容', formater: 'slot' }
+        { name: 'type', label: '商品类型', formater: 'slot' },
+        { name: 'bindId', label: '绑定商品', formater: 'slot' },
+        { name: 'status', label: '状态', formater: 'dict:marketStatus' },
+        { name: 'money', label: '价格' }
       ],
       formrules: {
-        thumbnail: [
-          { required: true, message: '请上传缩略图', trigger: 'chage' }
+        type: [
+          { required: true, message: '请选择商品类型', trigger: 'chage' }
         ],
-        name: [
-          { required: true, message: '请输入标题', trigger: 'blur' }
+        bindId: [
+          { required: true, message: '请绑定商品', trigger: 'chage' }
         ],
-        describe: [
-          { required: true, message: '请输入描述', trigger: 'blur' }
+        status: [
+          { required: true, message: '请输选择', trigger: 'chage' }
         ],
-        content: [
-          { required: true, message: '请输输入内容', trigger: 'blur' }
+        money: [
+          { required: true, message: '请输输入价格', trigger: 'blur' }
         ]
       }
     };
   },
   computed: {
-    ...mapState(['goodsList', 'Total', 'journalList'])
+    ...mapState(['marketList', 'Total', 'typeList', 'goodList', 'dict'])
   },
   async mounted() {
+    await this.marketStatus();
+    await this.marketType();
     await this.filterQuery();
   },
   methods: {
-    ...mapActions(['goodsQuery', 'goodsCreate', 'goodsUpdate', 'goodsDelete', 'goodsFetch']),
+    ...mapActions(['marketQuery', 'marketCreate', 'marketUpdate', 'marketDelete', 'goodQuery', 'marketStatus', 'marketType', 'goodFetch']),
     // 添加
-    addgoods () {
+    addmarket () {
       this.formdata = {};
-      this.title = '添加货品';
+      this.title = '添加商品';
       this.visibleSync = true;
     },
     // 修改
     async filtereEdit (e) {
-      const res = await this.goodsFetch({ id: e._id });
-      this.formdata = res.data;
-      this.title = '修改货品';
+      this.formdata = e;
+      this.title = '修改商品';
       this.visibleSync = true;
     },
     // 删除
     async filterDelete (e) {
-      const res = await this.goodsDelete({ id: e?._id });
+      const res = await this.marketDelete({ id: e?._id });
       this.$resChange(res, '删除成功');
       this.filterQuery();
     },
     // 查询
     async filterQuery ({ filter = {}, paging = { content: 0, size: 10 } } = {}) {
-      await this.goodsQuery({ filter, paging });
+      await this.marketQuery({ filter, paging });
+    },
+    // 类型改变
+    async typeChange(e) {
+      this.typeCode = e;
+      await this.goodQuery({ code: e });
+    },
+    // 商品改变
+    async goodChange(e) {
+      const res = await this.goodFetch({ code: this.typeCode, id: e });
+      const { name } = res;
+      this.$refs.formData.setForm('name', name);
     },
     // 表单保存
     async formSave (e) {
@@ -123,36 +147,15 @@ export default {
       let res, msg;
       // 修改
       if (e._id) {
-        res = await this.goodsUpdate(e);
-        msg = '货品修改成功';
+        res = await this.marketUpdate(e);
+        msg = '商品修改成功';
       } else {
-        res = await this.goodsCreate(e);
-        msg = '货品添加成功';
+        res = await this.marketCreate(e);
+        msg = '商品添加成功';
       }
       this.$resChange(res, msg);
       this.filterQuery();
       this.visibleSync = false;
-    },
-    // 富文本改变
-    editChage (e) {
-      this.$refs.formData.setForm('content', e);
-    },
-    // 缩略图上传
-    handleAvatarSuccess(res, file) {
-      this.$refs.formData.setForm('thumbnail', res.data.filePath);
-    },
-    // 缩略图上传限制
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isLt2M = file.size / 1024 / 1024 < 2;
-
-      if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!');
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!');
-      }
-      return isJPG && isLt2M;
     }
   }
 };