服务案例

package-lock.json

@@ -8,6 +8,7 @@
       "name": "schoolweb",
       "version": "3.3.0",
       "dependencies": {
+        "v-viewer": "^1.6.4",
         "vue-simple-uploader": "^0.7.6"
       },
       "devDependencies": {
@@ -10403,6 +10404,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@@ -10577,6 +10586,19 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "dependencies": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=4",
+        "npm": ">=3"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -10602,6 +10624,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/viewerjs": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.3.tgz",
+      "integrity": "sha512-efG3U61Umuj/1x6JAtdvnY9m407C/RkrkFilsMcLEWKDivpjNU3/FeL+feCY1Vkur9aQeBJ+z6K4CCPP7hv6vA=="
+    },
     "node_modules/vue": {
       "version": "2.6.11",
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
@@ -19674,6 +19701,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/thunky/-/thunky-1.1.0.tgz",
@@ -19806,6 +19838,15 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
       "dev": true
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -19828,6 +19869,11 @@
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
       "dev": true
     },
+    "viewerjs": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.11.3.tgz",
+      "integrity": "sha512-efG3U61Umuj/1x6JAtdvnY9m407C/RkrkFilsMcLEWKDivpjNU3/FeL+feCY1Vkur9aQeBJ+z6K4CCPP7hv6vA=="
+    },
     "vue": {
       "version": "2.6.11",
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",

package.json

@@ -8,6 +8,7 @@
     "report": "vue-cli-service build --report"
   },
   "dependencies": {
+    "v-viewer": "^1.6.4",
     "vue-simple-uploader": "^0.7.6"
   },
   "devDependencies": {

src/api/index.js

@@ -7,3 +7,31 @@ export const user_login = (data) =>
     method: "post",
     data
   });
+// 5.1 服务案例管理列表
+export const sc_list = (data) =>
+  request({
+    url: window._config.baseUrl + "sc/list",
+    method: "post",
+    data
+  });
+// 5.2 添加
+export const sc_save = (data) =>
+  request({
+    url: window._config.baseUrl + "sc/save",
+    method: "post",
+    data
+  });
+// 5.3 修改
+export const sc_update = (data) =>
+  request({
+    url: window._config.baseUrl + "sc/update",
+    method: "post",
+    data
+  });
+// 5.4 删除
+export const sc_remove = (data) =>
+  request({
+    url: window._config.baseUrl + "sc/remove",
+    method: "post",
+    data
+  });

src/main.js

@@ -4,7 +4,16 @@ import axios from "axios";
 import uploader from "vue-simple-uploader";
 import App from "./App.vue";
 import router from "./router";
-
+import VueViewer, { directive as viewerDirective } from "v-viewer";
+import "viewerjs/dist/viewer.css";
+// 使用Viewer图片预览器
+Vue.use(VueViewer);
+Vue.directive(
+  "viewer",
+  viewerDirective({
+    debug: true
+  })
+);
 Vue.use(ViewUI);
 Vue.prototype.$api = window._config;
 Vue.use(uploader);
@@ -13,7 +22,6 @@ Vue.config.productionTip = false;
 axios.defaults.baseURL = window._config.baseUrl;
 Vue.prototype.axios = axios;
 window.axios = axios;
-
 window.vue = new Vue({
   router,
   render: (h) => h(App)

src/views/service/index.vue

@@ -1,14 +1,176 @@
 <template>
-  <div>user</div>
+  <div class="service">
+    <div class="header">
+      <div>
+        <RadioGroup v-model="form_search.ltype" @on-change="init">
+          <Radio :label="1" :value="1">中文</Radio>
+          <Radio :label="2" :value="2">英文</Radio>
+        </RadioGroup>
+        <Input
+          style="width: 200px; margin-left: 20px"
+          placeholder="请输入服务名称"
+          @on-enter="init"
+          @on-search="init"
+          search
+          v-model="form_search.scname"
+        />
+      </div>
+      <Button @click="add" type="primary"> 添加 </Button>
+    </div>
+    <div>
+      <Table border :data="service.list" :columns="columns">
+        <template slot-scope="{ row }" slot="scpic">
+          <img class="img" v-if="row.scpic" :src="row.scpic" v-viewer />
+        </template>
+      </Table>
+    </div>
+  </div>
 </template>
 
 <script>
+import { sc_list } from "@/api/index";
+import { dateFormat } from "@/utils/index";
 export default {
   data() {
-    return {};
+    return {
+      form_search: {
+        page: 1,
+        size: 10,
+        scname: "",
+        ltype: 1 //1中文2英文
+      },
+      service: {
+        total: 0,
+        list: []
+      },
+      columns: [
+        {
+          title: "序号",
+          align: "center",
+          key: "scorder",
+          width: 70
+        },
+        {
+          title: "服务名称",
+          key: "scname",
+          align: "center"
+        },
+        {
+          title: "服务地址",
+          slot: "scpic",
+          align: "center"
+        },
+        {
+          title: "创建人",
+          key: "createname",
+          align: "center",
+          width: 140
+        },
+        {
+          title: "创建时间",
+          key: "createtime",
+          width: 180,
+          align: "center"
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          width: 150,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "span",
+                {
+                  style: {
+                    cursor: "pointer"
+                  },
+                  class: "theme_color",
+                  on: {
+                    click: () => {}
+                  }
+                },
+                "修改"
+              ),
+              h(
+                "span",
+                {
+                  style: {
+                    margin: "0 10px"
+                  },
+                  class: "theme_color"
+                },
+                "|"
+              ),
+              h(
+                "span",
+                {
+                  style: {
+                    cursor: "pointer"
+                  },
+                  class: "red",
+                  on: {
+                    click: () => {
+                      let content = "您确定要删除吗？";
+                      this.$Modal.confirm({
+                        title: "提示",
+                        content: content,
+                        onOk: () => {},
+                        onCancel: () => {}
+                      });
+                    }
+                  }
+                },
+                "删除"
+              )
+            ]);
+          }
+        }
+      ] //列表表格
+    };
   },
-  methods: {}
+  mounted() {
+    console.log(this.form_search);
+    this.init();
+  },
+  methods: {
+    init() {
+      sc_list(this.form_search).then((res) => {
+        if (res.code == 0) {
+          this.service.list = res.obj.list.map((v) => {
+            v.createtime = dateFormat(v.createtime);
+            v.scpic = this.$api.showImageUrl + v.scpic;
+            return v;
+          });
+        } else {
+          this.$Message.error(res.msg);
+        }
+        console.log(res);
+      });
+    },
+    add() {
+
+    }
+  }
 };
 </script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.header {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+}
+/deep/ .theme_color {
+  color: #2d8cf0;
+}
+/deep/ .red {
+  color: red;
+}
+.img {
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+  margin-top: 5px;
+}
+</style>