leisure-common 0.6.86 → 0.6.87

package/index.js

@@ -20,6 +20,8 @@ import LeButtonSelectMedia from "./le-button-select-media/index.js";
 import LeButtonUpload from "./le-button-upload/index.js";
 import LeImageContainer from "./le-image-container/index.js";
 
+import { LeHelp, LeHelpDetail } from "./le-help/index.js";
+
 const components = [
   LeComEmployee,
   LeComActivity,
@@ -41,6 +43,8 @@ const components = [
   // LeMediaList,
   LeButtonUpload,
   LeImageContainer,
+  LeHelp,
+  LeHelpDetail,
 ];
 
 const install = function (Vue) {
@@ -74,4 +78,7 @@ export default {
   // LeMediaList,
   LeButtonUpload,
   LeImageContainer,
+
+  LeHelp,
+  LeHelpDetail,
 };

package/le-help/index.js

@@ -0,0 +1,12 @@
+import LeHelp from "./src/main.vue";
+import LeHelpDetail from "./src/detail.vue";
+
+LeHelp.install = function (Vue) {
+  Vue.component(LeHelp.name, LeHelp);
+};
+
+LeHelpDetail.install = function (Vue) {
+  Vue.component(LeHelpDetail.name, LeHelpDetail);
+};
+
+export { LeHelp, LeHelpDetail };

package/le-help/src/detail.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="le-help">
+    <div class="title">{{ title }}</div>
+    <div class="comment" v-html="comment"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "le-help-detail",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    comment: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.le-help {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+
+  .title {
+    text-align: center;
+    font-weight: bold;
+    font-size: 26px;
+  }
+
+  .comment {
+    max-height: 650px;
+    overflow-y: auto;
+  }
+}
+</style>

package/le-help/src/main.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="le-depart-container">
+    <el-form :inline="true">
+      <el-form-item>
+        <el-button type="primary" @click="addHelp()">新建</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData" border row-key="id" stripe style="width: 100%">
+      <el-table-column prop="type" label="类型" align="center">
+      </el-table-column>
+      <el-table-column prop="title" label="标题" align="center">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="180">
+        <template slot-scope="scope">
+          <le-button @click="edit(scope.row)">编辑</le-button>
+          <le-button-msg @click="del(scope.row.id)">删除</le-button-msg>
+        </template>
+      </el-table-column>
+    </el-table>
+    <le-dialog-container
+      title="新建/编辑帮助文档"
+      :showDialog="showDialog"
+      :showFooter="true"
+      @close="handleClose"
+      @saveData="savedepart"
+    >
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="140px"
+        v-if="showDialog"
+      >
+        <el-form-item label="类型" prop="type">
+          <el-input v-model="ruleForm.type"></el-input>
+        </el-form-item>
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="ruleForm.title"></el-input>
+        </el-form-item>
+        <el-form-item label="内容" prop="comment">
+          <le-editor v-model="ruleForm.comment"></le-editor>
+        </el-form-item>
+      </el-form>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+import { list, edit, del } from "@/api/SystemHelp";
+import { LeEditor } from "leisure-editor";
+import leButton from "../../le-button/index";
+import LeButtonMsg from "../../le-button-msg/index";
+export default {
+  name: "le-help",
+  components: {
+    LeEditor,
+    leButton,
+    LeButtonMsg,
+  },
+  data() {
+    return {
+      tableData: [],
+      ruleForm: {
+        id: "",
+        type: "",
+        title: "",
+        comment: "",
+      },
+      rules: {
+        type: [
+          { required: true, message: "请输入类型", trigger: "blur" },
+          { max: 6, message: "长度在 1 到 6个字符", trigger: "blur" },
+        ],
+        title: [
+          { required: true, message: "请输入标题", trigger: "blur" },
+          { max: 20, message: "长度在 1 到 20个字符", trigger: "blur" },
+        ],
+        comment: [{ required: true, message: "请输入类型", trigger: "blur" }],
+      },
+      showDialog: false,
+    };
+  },
+  computed: {},
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    addHelp() {
+      this.showDialog = true;
+    },
+    edit(row) {
+      this.ruleForm = JSON.parse(JSON.stringify(row));
+      this.showDialog = true;
+    },
+    savedepart() {
+      let params = JSON.parse(JSON.stringify(this.ruleForm));
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          edit(params).then(() => {
+            this.$message.success("提交成功～");
+            this.getList();
+            this.handleClose();
+          });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    handleClose() {
+      this.showDialog = false;
+      this.initForm();
+    },
+    getList() {
+      list().then((res) => {
+        this.tableData = res.data.data || [];
+      });
+    },
+    del(id) {
+      del({
+        id: id,
+      }).then((response) => {
+        this.getList();
+        this.$message.success("删除成功");
+      });
+    },
+    initForm() {
+      this.ruleForm.id = "";
+      this.ruleForm.type = "";
+      this.ruleForm.title = "";
+      this.ruleForm.comment = "";
+    },
+  },
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leisure-common",
-  "version": "0.6.86",
+  "version": "0.6.87",
   "description": "leisure-common是京心数据在leisure-core基础上开发的一套后台管理系统基于故事的电商行业组件库，封装了大量实用的UI控件模板,方便开发者快速搭建前端应用",
   "private": false,
   "author": "北方乐逍遥(zcx7878)",
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "leisure-core": "^0.6.86"
+    "leisure-core": "^0.6.87"
   },
   "devDependencies": {}
 }