术语管理和商品管理联调

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.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>