术语管理和商品管理联调

src/views/main.vue

@@ -3,11 +3,15 @@
     class="site-wrapper"
     :class="{ 'site-sidebar--fold': sidebarFold }"
     v-loading.fullscreen.lock="loading"
-    element-loading-text="拼命加载中">
+    element-loading-text="拼命加载中"
+  >
     <template v-if="!loading">
       <main-navbar />
       <main-sidebar />
-      <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
+      <div
+        class="site-content__wrapper"
+        :style="{ 'min-height': documentClientHeight + 'px' }"
+      >
         <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
       </div>
     </template>
@@ -15,65 +19,79 @@
 </template>
 
 <script>
-  import MainNavbar from './main-navbar'
-  import MainSidebar from './main-sidebar'
-  import MainContent from './main-content'
-  export default {
-    provide () {
+import MainNavbar from "./main-navbar";
+import MainSidebar from "./main-sidebar";
+import MainContent from "./main-content";
+export default {
+  provide() {
     return {
       // 刷新
-        refresh () {
-          this.$store.commit('common/updateContentIsNeedRefresh', true)
+      refresh() {
+        this.$store.commit("common/updateContentIsNeedRefresh", true);
         this.$nextTick(() => {
-            this.$store.commit('common/updateContentIsNeedRefresh', false)
-          })
-        }
-      }
+          this.$store.commit("common/updateContentIsNeedRefresh", false);
+        });
       },
-    data () {
+    };
+  },
+  data() {
     return {
-        loading: true
-      }
+      loading: true,
+    };
   },
   components: {
     MainNavbar,
     MainSidebar,
-      MainContent
+    MainContent,
   },
   computed: {
     documentClientHeight: {
-        get () { return this.$store.state.common.documentClientHeight },
-        set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
+      get() {
+        return this.$store.state.common.documentClientHeight;
+      },
+      set(val) {
+        this.$store.commit("common/updateDocumentClientHeight", val);
+      },
     },
     sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold }
+      get() {
+        return this.$store.state.common.sidebarFold;
+      },
     },
     userId: {
-        get () { return this.$store.state.user.id },
-        set (val) { this.$store.commit('user/updateId', val) }
+      get() {
+        return this.$store.state.user.id;
+      },
+      set(val) {
+        this.$store.commit("user/updateId", val);
+      },
     },
     userName: {
-        get () { return this.$store.state.user.name },
-        set (val) { this.$store.commit('user/updateName', val) }
-      }
+      get() {
+        return this.$store.state.user.name;
       },
-    created () {
-      this.getUserInfo()
+      set(val) {
+        this.$store.commit("user/updateName", val);
       },
-    mounted () {
-      this.resetDocumentClientHeight()
+    },
+  },
+  created() {
+    this.getUserInfo();
+  },
+  mounted() {
+    this.resetDocumentClientHeight();
   },
   methods: {
     // 重置窗口可视高度
-      resetDocumentClientHeight () {
-        this.documentClientHeight = document.documentElement['clientHeight']
+    resetDocumentClientHeight() {
+      this.documentClientHeight = document.documentElement["clientHeight"];
       window.onresize = () => {
-          this.documentClientHeight = document.documentElement['clientHeight']
-        }
+        this.documentClientHeight = document.documentElement["clientHeight"];
+      };
     },
     // 获取当前管理员信息
-      getUserInfo () {
-        this.loading = false
+    getUserInfo() {
+      this.loading = false;
       // this.$http({
       //   url: this.$http.adornUrl('/sys/user/info'),
       //   method: 'get',
@@ -85,7 +103,16 @@
       //     this.userName = data.user.username
       //   }
       // })
-      }
-    }
-  }
+    },
+  },
+};
 </script>
+
+<style lang="scss">
+.dialog {
+  .el-dialog__body {
+    height: 60vh;
+    overflow-y: auto;
+  }
+}
+</style>
\ No newline at end of file

src/views/modules/plate/glossary-add-or-update.vue

+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmit()"
+      label-width="80px"
+    >
+      <el-form-item label="英文标题" prop="titleEn">
+        <el-input v-model="dataForm.titleEn" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="中文标题" prop="titleCn">
+        <el-input v-model="dataForm.titleCn" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="关键字" prop="keyword">
+        <el-input v-model="dataForm.keyword" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="作者" prop="author">
+        <el-input v-model="dataForm.author" placeholder="请输入" ></el-input>
+      </el-form-item>
+      <el-form-item label="解释" prop="brief">
+        <el-input v-model="dataForm.brief" rows="5"  placeholder="请输入" type="textarea"></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="content">
+        <el-input v-model="dataForm.content" rows="5"  placeholder="请输入" type="textarea"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showInfo: false,
+      visible: false,
+      dataForm: {
+        id: 0,
+        titleEn: "",
+        titleCn: "",
+        keyword: "",
+        brief: "",
+        releasedate: "",
+        updatedate: "",
+        author: "",
+        content: "",
+        hits: "",
+        editor: "",
+        lasteditor: "",
+      },
+      dataRule: {
+        titleEn: [
+          {
+            required: true,
+            message: "英文标题不能为空",
+            trigger: "blur",
+          },
+        ],
+        titleCn: [
+          {
+            required: true,
+            message: "中文标题不能为空",
+            trigger: "blur",
+          },
+        ],
+        keyword: [
+          {
+            required: true,
+            message: "关键字不能为空",
+            trigger: "blur",
+          },
+        ],
+        brief: [
+          {
+            required: true,
+            message: "解释不能为空",
+            trigger: "blur",
+          },
+        ],
+        author: [
+          {
+            required: true,
+            message: "作者不能为空",
+            trigger: "blur",
+          },
+        ],
+        content: [
+          {
+            required: true,
+            message: "备注不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || 0;
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(
+              `/office/glossary/info/${this.dataForm.id}`
+            ),
+            method: "get",
+            params: this.$http.adornParams(),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.dataForm.titleEn = data.glossary.titleEn;
+              this.dataForm.titleCn = data.glossary.titleCn;
+              this.dataForm.keyword = data.glossary.keyword;
+              this.dataForm.brief = data.glossary.brief;
+              this.dataForm.author = data.glossary.author;
+              this.dataForm.content = data.glossary.content;
+            }
+          });
+        }
+      });
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(
+              `/office/glossary/${!this.dataForm.id ? "save" : "update"}`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+              id: this.dataForm.id || undefined,
+              titleEn: this.dataForm.titleEn,
+              titleCn: this.dataForm.titleCn,
+              keyword: this.dataForm.keyword,
+              brief: this.dataForm.brief,
+              author: this.dataForm.author,
+              content: this.dataForm.content,
+            }),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+  },
+};
+</script>

src/views/modules/plate/glossary.vue

+<template>
+  <div class="mod-config">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+    <el-form-item label='关键字'>
+        <el-input
+          v-model="dataForm.key"
+          placeholder="参数名"
+          clearable
+        ></el-input>
+      </el-form-item>
+    <el-form-item prop='status'>
+        <el-select v-model="dataForm.titleCn"  clearable>
+          <el-option
+            v-for="item in titleList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+        <el-button
+          v-if="isAuth('manage:glossary:save')"
+          type="primary"
+          @click="addOrUpdateHandle()"
+          >新增</el-button
+        >
+        <el-button
+          v-if="isAuth('manage:glossary:delete')"
+          type="danger"
+          @click="deleteHandle()"
+          :disabled="dataListSelections.length <= 0"
+          >批量删除</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div class="add-btn">
+      <el-button
+        v-if="isAuth('manage:center:save')"
+        type="primary"
+        @click="addOrUpdateHandle()"
+      >
+        + 添加术语</el-button
+      >
+    </div>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%"
+    >
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="id"
+        header-align="center"
+        align="center"
+        label="ID"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="titleEn"
+        header-align="center"
+        align="center"
+        label="英文标题"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="titleCn"
+        header-align="center"
+        align="center"
+        label="中文标题"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="keyword"
+        header-align="center"
+        align="center"
+        label="关键字"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="brief"
+        header-align="center"
+        align="center"
+        label="解释"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="editor"
+        header-align="center"
+        align="center"
+        label="编辑"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="updatedate"
+        header-align="center"
+        align="center"
+        label="创建时间"
+      >
+      </el-table-column>
+
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="addOrUpdateHandle(scope.row.id)"
+            >修改</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="deleteHandle(scope.row.id)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from "./glossary-add-or-update";
+export default {
+  data() {
+    return {
+      dataForm: {
+        key: "",
+        titleCn: '中文标题'
+      },
+      titleList: [
+        {
+          label: '中文标题',
+          value: '中文标题'
+        },
+        {
+          label: '英文标题',
+          value: '英文标题'
+        }
+      ],
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+    };
+  },
+  components: {
+    AddOrUpdate,
+  },
+  activated() {
+    this.getDataList();
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/office/glossary/list"),
+        method: "get",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          titleCn: this.dataForm.titleCn,
+          keyword: this.dataForm.key,
+        }),
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.records;
+          this.totalPage = data.page.total;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id
+        ? [id]
+        : this.dataListSelections.map((item) => {
+            return item.id;
+          });
+      this.$confirm(
+        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
+        this.$http({
+          url: this.$http.adornUrl("/office/glossary/delete"),
+          method: "post",
+          data: this.$http.adornData(ids, false),
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  },
+};
+</script>

src/views/modules/plate/product-add-or-update.vue

+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    class="dialog"
+  >
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmit()"
+      label-width="80px"
+    >
+      <el-form-item label="商品名称" prop="prename">
+        <el-input v-model="dataForm.prename" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="商品分类" prop="categoryid">
+        <el-select v-model="dataForm.categoryid" clearable>
+          <el-option
+            v-for="item in categoryIdList"
+            :key="item.categoryid"
+            :label="item.category"
+            :value="item.categoryid"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品等级" prop="levels">
+        <el-input v-model="dataForm.levels" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="商品价格" prop="price">
+        <el-input v-model="dataForm.price" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item el-form-item label="上市时间" prop="predate">
+        <el-input v-model="dataForm.predate" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="作者" prop="author">
+        <el-input v-model="dataForm.author" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="出版社" prop="company">
+        <el-input v-model="dataForm.company" placeholder="请输入"></el-input>
+      </el-form-item>
+      <el-form-item label="产品图片" prop="graph">
+        <el-upload
+          v-show="!showInfo"
+          class="avatar-uploader"
+          action=""
+          :show-file-list="false"
+          :http-request="Upload"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img v-if="dialogVisible" :src="dataForm.graph" class="avatar" />
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="商品简介" prop="introduce">
+        <el-input
+          v-model="dataForm.introduce"
+          type="textarea"
+          rows="5"
+          placeholder="请输入"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="商品描述" prop="description">
+        <Ueditor
+          @ready="editorReady"
+          :value="dataForm.introduce"
+          :config="ueditor.config"
+          ref="ue"
+        ></Ueditor>
+      </el-form-item>
+      <el-form-item label="商品备注" prop="remarks">
+        <el-input
+          v-model="dataForm.remarks"
+          type="textarea"
+          rows="5"
+          placeholder="请输入"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import Ueditor from "../temps/ueditor";
+
+export default {
+  components: {
+    Ueditor,
+  },
+  props: ['categoryIdList'],
+  data() {
+    return {
+      visible: false,
+      showInfo: false,
+      dialogVisible: false,
+      ueditor: {
+        value: "",
+        config: {},
+      },
+      imgUrl: new FormData(),
+      dataForm: {
+        id: 0,
+        prename: "",
+        company: "",
+        intro: "",
+        predate: "",
+        price: "",
+        pretype: "",
+        other: "",
+        graph2: "",
+        addlink: "",
+        prestock: "",
+        graph: "",
+        description: "",
+        remarks: "",
+        name: "",
+        introduce: "",
+        productdate: "",
+        score: "",
+        grade: "",
+        photo: "",
+        recommend: "",
+        solded: "",
+        viewnum: "",
+        discount: "",
+        sortsid: "",
+        categoryid: "",
+        pic: "",
+        makein: "",
+        adddate: "",
+        ranknum: "",
+        vipprice: "",
+        amount: "",
+        stock: "",
+        link: "",
+        mark: "",
+        type: "",
+        levels: "",
+        author: "",
+        status: "",
+        auditor: "",
+      },
+      dataRule: {
+        prename: [
+          {
+            required: true,
+            message: "商品名称不能为空",
+            trigger: "blur",
+          },
+        ],
+        categoryid: [
+          {
+            required: true,
+            message: "商品分类不能为空",
+            trigger: "blur",
+          },
+        ],
+        levels: [
+          {
+            required: true,
+            message: "商品等级不能为空",
+            trigger: "blur",
+          },
+        ],
+
+        price: [
+          {
+            required: true,
+            message: "商品价格不能为空",
+            trigger: "blur",
+          },
+        ],
+        predate: [
+          {
+            required: true,
+            message: "上市时间不能为空",
+            trigger: "blur",
+          },
+        ],
+        author: [
+          {
+            required: true,
+            message: "作者不能为空",
+            trigger: "blur",
+          },
+        ],
+        company: [
+          {
+            required: true,
+            message: "出版社不能为空",
+            trigger: "blur",
+          },
+        ],
+        graph: [
+          {
+            required: true,
+            message: "产品图片不能为空",
+            trigger: "blur",
+          },
+        ],
+        introduce: [
+          {
+            required: true,
+            message: "商品简介不能为空",
+            trigger: "blur",
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: "商品描述不能为空",
+            trigger: "blur",
+          },
+        ],
+        remarks: [
+          {
+            required: true,
+            message: "商品备注不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || 0;
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        if (this.dataForm.id) {
+          this.$http({
+            url: this.$http.adornUrl(
+              `/office/product/info/${this.dataForm.id}`
+            ),
+            method: "get",
+            params: this.$http.adornParams(),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              console.log(data.product, 'data.productdata.productdata.product');
+              this.dataForm.prename = data.product.prename;
+              this.dataForm.company = data.product.company;
+              this.dataForm.intro = data.product.intro;
+              this.dataForm.predate = data.product.predate;
+              this.dataForm.price = data.product.price;
+              this.dataForm.pretype = data.product.pretype;
+              this.dataForm.other = data.product.other;
+              this.dataForm.graph2 = data.product.graph2;
+              this.dataForm.addlink = data.product.addlink;
+              this.dataForm.prestock = data.product.prestock;
+              this.dataForm.graph = data.product.graph;
+              this.dataForm.description = data.product.description;
+              this.dataForm.remarks = data.product.remarks;
+              this.dataForm.name = data.product.name;
+              this.dataForm.introduce = data.product.introduce;
+              this.dataForm.productdate = data.product.productdate;
+              this.dataForm.score = data.product.score;
+              this.dataForm.grade = data.product.grade;
+              this.dataForm.photo = data.product.photo;
+              this.dataForm.recommend = data.product.recommend;
+              this.dataForm.solded = data.product.solded;
+              this.dataForm.viewnum = data.product.viewnum;
+              this.dataForm.discount = data.product.discount;
+              this.dataForm.sortsid = data.product.sortsid;
+              this.dataForm.categoryid = data.product.categoryid;
+              this.dataForm.pic = data.product.pic;
+              this.dataForm.makein = data.product.makein;
+              this.dataForm.adddate = data.product.adddate;
+              this.dataForm.ranknum = data.product.ranknum;
+              this.dataForm.vipprice = data.product.vipprice;
+              this.dataForm.amount = data.product.amount;
+              this.dataForm.stock = data.product.stock;
+              this.dataForm.link = data.product.link;
+              this.dataForm.mark = data.product.mark;
+              this.dataForm.type = data.product.type;
+              this.dataForm.levels = data.product.levels;
+              this.dataForm.author = data.product.author;
+              this.dataForm.status = data.product.status;
+              this.dataForm.auditor = data.product.auditor;
+            }
+          });
+        }
+      });
+    },
+    // 上传之前校验
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === "image/jpeg";
+      const isPNG = file.type === "image/png";
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isJPG) {
+        if (!isPNG) {
+          this.$message.error("上传图片只能是 JPG, PNG 格式!");
+        }
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      if (file) {
+        var windowURL = window.URL || window.webkitURL;
+        this.dataForm.graph = windowURL.createObjectURL(file);
+        this.dialogVisible = true;
+        this.imgUrl.append("file", file);
+      }
+    },
+    Upload() {
+      this.$http({
+        url: this.$http.adornUrl("/office/file/uploadFile"),
+        method: "post",
+        data: this.imgUrl,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      })
+        .then((res) => {
+          console.log(res);
+          this.dataForm.graph = res.data.data;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(
+              `/office/product/${!this.dataForm.id ? "save" : "update"}`
+            ),
+            method: "post",
+            data: this.$http.adornData({
+              id: this.dataForm.id || undefined,
+              prename: this.dataForm.prename,
+              company: this.dataForm.company,
+              intro: this.dataForm.intro,
+              predate: this.dataForm.predate,
+              price: this.dataForm.price,
+              pretype: this.dataForm.pretype,
+              other: this.dataForm.other,
+              graph2: this.dataForm.graph2,
+              addlink: this.dataForm.addlink,
+              prestock: this.dataForm.prestock,
+              graph: this.dataForm.graph,
+              description: this.dataForm.description,
+              remarks: this.dataForm.remarks,
+              name: this.dataForm.name,
+              introduce: this.dataForm.introduce,
+              productdate: this.dataForm.productdate,
+              score: this.dataForm.score,
+              grade: this.dataForm.grade,
+              photo: this.dataForm.photo,
+              recommend: this.dataForm.recommend,
+              solded: this.dataForm.solded,
+              viewnum: this.dataForm.viewnum,
+              discount: this.dataForm.discount,
+              sortsid: this.dataForm.sortsid,
+              categoryid: this.dataForm.categoryid,
+              pic: this.dataForm.pic,
+              makein: this.dataForm.makein,
+              adddate: this.dataForm.adddate,
+              ranknum: this.dataForm.ranknum,
+              vipprice: this.dataForm.vipprice,
+              amount: this.dataForm.amount,
+              stock: this.dataForm.stock,
+              link: this.dataForm.link,
+              mark: this.dataForm.mark,
+              type: this.dataForm.type,
+              levels: this.dataForm.levels,
+              author: this.dataForm.author,
+              status: this.dataForm.status,
+              auditor: this.dataForm.auditor,
+            }),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false;
+                  this.$emit("refreshDataList");
+                },
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 更新父子组件内容
+    editorReady(instance) {
+      instance.setContent(this.dataForm.content);
+      instance.addListener("contentChange", () => {
+        this.dataForm.content = instance.getContent();
+      });
+    },
+  },
+};
+</script>
\ No newline at end of file

src/views/modules/plate/product.vue

+<template>
+  <div class="mod-config">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
+      <el-form-item label="关键字">
+        <el-input
+          v-model="dataForm.key"
+          placeholder="请输入"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="商品分类">
+        <el-select v-model="dataForm.categoryid" clearable>
+          <el-option
+            v-for="item in categoryIdList"
+            :key="item.categoryid"
+            :label="item.category"
+            :value="item.categoryid"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="add-btn">
+      <el-button
+        v-if="isAuth('manage:news:save')"
+        type="primary"
+        @click="addOrUpdateHandle()"
+      >
+        + 添加商品</el-button
+      >
+    </div>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="levels"
+        header-align="center"
+        align="center"
+        label="等级"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="categoryName"
+        header-align="center"
+        align="center"
+        label="商品分类"
+      >
+      </el-table-column>
+
+      <el-table-column
+        prop="prename"
+        header-align="center"
+        align="center"
+        label="商品名称"
+      >
+      </el-table-column>
+
+      <el-table-column
+        prop="adddate"
+        header-align="center"
+        align="center"
+        label="添加时间"
+      >
+      </el-table-column>
+
+      <el-table-column
+        prop="remarks"
+        header-align="center"
+        align="center"
+        label="备注"
+      >
+      </el-table-column>
+
+      <el-table-column
+        prop="auditor"
+        header-align="center"
+        align="center"
+        label="审核人"
+      >
+      </el-table-column>
+
+      <el-table-column header-align="center" align="center" label="状态">
+        <template slot-scope="scope">{{
+          scope.row.status | statusFilter
+        }}</template>
+      </el-table-column>
+
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="addOrUpdateHandle(scope.row.id)"
+            >修改</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click="deleteHandle(scope.row.id)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+    >
+    </el-pagination>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      :categoryIdList="categoryIdList"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from "./product-add-or-update";
+export default {
+  data() {
+    return {
+      dataForm: {
+        key: "",
+        categoryid: "",
+      },
+      categoryIdList: [],
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+    };
+  },
+  components: {
+    AddOrUpdate,
+  },
+  filters: {
+    statusFilter(val) {
+      let newVal;
+      switch (val) {
+        case 0:
+          return "等待";
+          break;
+        case 1:
+          return "成功";
+          break;
+        default:
+          return "失败";
+          break;
+      }
+    },
+  },
+  activated() {
+    this.getCategoryList();
+    this.getDataList();
+  },
+  methods: {
+    // 获取商品分类列表
+    getCategoryList() {
+      this.$http({
+        url: this.$http.adornUrl("/office/pcategory/getCategoryList"),
+        method: "get",
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.categoryIdList = data.list;
+        } else {
+          this.categoryIdList = [];
+        }
+      });
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("/office/product/list"),
+        method: "get",
+        params: this.$http.adornParams({
+          page: this.pageIndex,
+          limit: this.pageSize,
+          keyword: this.dataForm.key,
+          categoryid: this.dataForm.categoryid,
+        }),
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list;
+          this.totalPage = data.page.totalCount;
+        } else {
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        this.dataListLoading = false;
+      });
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val;
+    },
+    // 新增 / 修改
+    addOrUpdateHandle(id) {
+      this.addOrUpdateVisible = true;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id);
+      });
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id
+        ? [id]
+        : this.dataListSelections.map((item) => {
+            return item.id;
+          });
+      this.$confirm(
+        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
+        this.$http({
+          url: this.$http.adornUrl("/office/product/delete"),
+          method: "post",
+          data: this.$http.adornData(ids, false),
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: "操作成功",
+              type: "success",
+              duration: 1500,
+              onClose: () => {
+                this.getDataList();
+              },
+            });
+          } else {
+            this.$message.error(data.msg);
+          }
+        });
+      });
+    },
+  },
+};
+</script>