feat:应用集市静态页面完成

base-manager-ui/admin/package.json

@@ -34,6 +34,7 @@
     "mockjs": "^1.1.0",
     "moment": "^2.24.0",
     "nprogress": "^0.2.0",
+    "quill-image-resize-module": "^3.0.0",
     "v-viewer": "^1.6.4",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.11",

base-manager-ui/admin/src/pages/basicset/appmarket/AppDetails.vue

@@ -17,7 +17,7 @@
 
 <script>
 import AppDetailsPage from "./components/AppDetailsPage.vue";
-import DataUpdata from "./components/DataUpdata.vue";
+import DataUpdata from "./components/DataUpdate.vue";
 export default {
   components: {
     AppDetailsPage,

base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdata.vue

-<template>
-  <div>123456789</div>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="less" scoped>
-</style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/appmarket/components/DataUpdate.vue

+<template>
+  <div class="data-update">
+    <!-- 头部 -->
+    <div class="header flex aic jcb mb20">
+      <a-button type="primary" @click="handleAdd">新增</a-button>
+      <a-input-search
+        style="width: 300px"
+        placeholder="请输入标题关键字搜索"
+        enter-button="搜索"
+        v-model="searchVal"
+        allowClear
+        @search="onSearch"
+      />
+    </div>
+    <!-- 表格 -->
+    <div class="table-content">
+      <a-table
+        :loading="loading"
+        bordered
+        :scroll="{ y: 550 }"
+        :columns="columns"
+        :pagination="{
+          showTotal: (total) => `共 ${total} 条`,
+          current: current,
+          total: total,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: pageSizeOptions,
+          onChange: handleChange,
+          onShowSizeChange: showSizeChange,
+        }"
+        :data-source="tableData"
+        :rowKey="(record) => record.id"
+      >
+        <!-- 序号 -->
+        <span slot="num" slot-scope="text, record, index">{{
+          (current - 1) * size + index + 1
+        }}</span>
+
+        <!-- 操作 -->
+        <template slot="action" slot-scope="text">
+          <a-space size="middle">
+            <a class="primary" @click="handleEdit(text)">编辑</a>
+            <a class="delete" @click="handleDel(text.id)">删除</a>
+          </a-space>
+        </template>
+      </a-table>
+    </div>
+    <!-- 新增数据 -->
+    <AddData
+      ref="AddData"
+      :AddVisible.sync="AddVisible"
+      :title="title"
+    ></AddData>
+  </div>
+</template>
+
+<script>
+import AddData from "../modal/AddData.vue";
+const columns = [
+  {
+    title: "序号",
+    dataIndex: "num",
+    width: "65px",
+    scopedSlots: {
+      customRender: "num",
+    },
+  },
+  {
+    title: "标题",
+    dataIndex: "title",
+    ellipsis: true,
+  },
+  {
+    title: "制定机关",
+    dataIndex: "dpt",
+    ellipsis: true,
+  },
+  {
+    title: "法律性质",
+    dataIndex: "xingzhi",
+    width: "10%",
+  },
+  {
+    title: "公布日期",
+    dataIndex: "time",
+    width: "10%",
+  },
+  {
+    title: "更新时间",
+    dataIndex: "time2",
+    width: "10%",
+  },
+  {
+    title: "操作",
+    width: "10%",
+    scopedSlots: { customRender: "action" },
+  },
+];
+export default {
+  components: {
+    AddData,
+  },
+  data() {
+    return {
+      columns,
+      loading: false,
+      current: 1,
+      size: 10,
+      total: 100,
+      pageSizeOptions: ["10", "30", "50", "100"],
+      searchVal: "",
+      tableData: [
+        {
+          id: 1,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 2,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 3,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 4,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 5,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 6,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 7,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 8,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 9,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 10,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+        {
+          id: 11,
+          title: "中华人民共和国反电信网络诈骗法",
+          dpt: "全国人民代表大会常务委员会",
+          xingzhi: "法律",
+          time: "2022-10-30",
+          time2: "2022-10-30",
+        },
+      ],
+      AddVisible: false,
+      title: "",
+    };
+  },
+  methods: {
+    // 新增
+    handleAdd() {
+      this.title = "新增";
+      this.$refs.AddData.onAdd();
+      this.AddVisible = true;
+    },
+    // 搜索
+    onSearch() {
+      console.log(2);
+    },
+    // 翻页
+    handleChange(cur) {
+      this.current = cur;
+    },
+    // 改变每页显示数量
+    showSizeChange(current, size) {
+      this.current = current;
+      this.size = size;
+    },
+    // 编辑
+    handleEdit(row) {
+      this.title = "编辑";
+      this.$refs.AddData.onEdit(row);
+      this.AddVisible = true;
+    },
+    // 删除
+    handleDel(id) {
+      let _this = this;
+      _this.$confirm({
+        title: "系统提示",
+        content: "删除不可恢复，确定要删除吗？",
+        okText: "确定",
+        okType: "danger",
+        cancelText: "取消",
+        centered: true,
+        icon: "exclamation-circle",
+        maskClosable: true,
+        async onOk() {
+          console.log(id);
+        },
+        onCancel() {
+          console.log("Cancel");
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file

base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddApp.vue

@@ -196,6 +196,15 @@ export default {
       });
       this.fileList = fileList;
     },
+    // 新增
+    onAdd() {
+      Object.assign(this.formInfo, this.$options.data().formInfo);
+      this.formInfo.id && this.$delete(this.formInfo, "id");
+    },
+    // 编辑
+    onEdit(data) {
+      this.form = { ...data };
+    },
   },
 };
 </script>

base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddData.vue

+<template>
+  <div class="add-app">
+    <a-drawer
+      width="60%"
+      :maskClosable="false"
+      :title="title"
+      :visible="Visible"
+      @close="onClose"
+    >
+      <div class="main">
+        <a-form-model
+          :model="form"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+        >
+          <a-form-model-item label="标题" prop="">
+            <a-input v-model="form.name" placeholder="请输入标题" />
+          </a-form-model-item>
+          <a-form-model-item label="制定机关" prop="">
+            <a-input v-model="form.name" placeholder="请输入制定机关" />
+          </a-form-model-item>
+          <a-form-model-item label="法律性质" prop="">
+            <a-select v-model="form.region" placeholder="请选择法律性质">
+              <a-select-option value="shanghai"> Zone one </a-select-option>
+              <a-select-option value="beijing"> Zone two </a-select-option>
+            </a-select>
+          </a-form-model-item>
+          <a-form-model-item label="公布日期" prop="">
+            <a-date-picker valueFormat="x" />
+          </a-form-model-item>
+          <a-form-model-item class="content" label="内容" prop="">
+            <div class="content-box">
+              <YQuillEditor height="auto" v-model="form.content"></YQuillEditor>
+            </div>
+          </a-form-model-item>
+        </a-form-model>
+      </div>
+      <!-- 底部按钮 -->
+      <div
+        :style="{
+          width: '100%',
+          height: '54px',
+          borderTop: '1px solid #e8e8e8',
+          padding: '10px 16px',
+          textAlign: 'left',
+          background: '#fff',
+          borderRadius: '0 0 4px 4px',
+        }"
+      >
+        <a-space size="middle">
+          <a-button @click="onClose"> 取消 </a-button>
+          <a-button type="primary" @click="onSubmit"> 保存 </a-button>
+        </a-space>
+      </div>
+    </a-drawer>
+  </div>
+</template>
+
+<script>
+import YQuillEditor from "@/components/YQuillEditor.vue";
+export default {
+  components: {
+    YQuillEditor,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    AddVisible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      labelCol: {
+        span: 2,
+      },
+      wrapperCol: {
+        span: 22,
+      },
+      loading: false,
+      imageUrl: "",
+      form: {
+        content: "",
+      },
+      fileList: [],
+    };
+  },
+  computed: {
+    Visible: {
+      get() {
+        return this.AddVisible;
+      },
+      set(val) {
+        this.$emit("update:AddVisible", val);
+      },
+    },
+  },
+  methods: {
+    // 关闭
+    onClose() {
+      this.Visible = false;
+    },
+    // 提交
+    onSubmit() {
+      console.log(1);
+    },
+    // 新增
+    onAdd() {
+      Object.assign(this.formInfo, this.$options.data().formInfo);
+      this.formInfo.id && this.$delete(this.formInfo, "id");
+    },
+    // 编辑
+    onEdit(data) {
+      this.form = { ...data };
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-form-item {
+  display: flex;
+  align-items: center;
+}
+/deep/.ant-drawer-body {
+  height: calc(100vh - 55px);
+  padding: 0px !important;
+  display: flex;
+  flex-direction: column;
+}
+.main {
+  height: 1px;
+  padding: 24px;
+  flex: 1;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 12px;
+    overflow-y: auto;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background-color: rgba(144, 147, 153, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 6px;
+    background: #fff;
+  }
+}
+.content {
+  align-items: flex-start !important;
+  .content-box {
+    min-height: 500px;
+    display: flex;
+  }
+}
+</style>
\ No newline at end of file

base-manager-ui/admin/vue.config.js

@@ -68,6 +68,13 @@ module.exports = {
         resolveCss,
       })
     );
+    config.plugins.push(
+      // 控制富文本图片大小
+      new webpack.ProvidePlugin({
+        "window.Quill": "quill/dist/quill.js",
+        Quill: "quill/dist/quill.js",
+      })
+    );
     // Ignore all locale files of moment.js
     // config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
     // 生产环境下将资源压缩成gzip格式

base-manager-ui/admin/yarn.lock

@@ -8999,7 +8999,16 @@ quill-delta@^3.6.2:
     extend "^3.0.2"
     fast-diff "1.1.2"
 
-quill@^1.3.4:
+quill-image-resize-module@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/quill-image-resize-module/-/quill-image-resize-module-3.0.0.tgz#0fd93746a837336d95b2f536140416a623c71771"
+  integrity sha512-1TZBnUxU/WIx5dPyVjQ9yN7C6mLZSp04HyWBEMqT320DIq4MW4JgzlOPDZX5ZpBM3bU6sacU4kTLUc8VgYQZYw==
+  dependencies:
+    lodash "^4.17.4"
+    quill "^1.2.2"
+    raw-loader "^0.5.1"
+
+quill@^1.2.2, quill@^1.3.4:
   version "1.3.7"
   resolved "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz"
   integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
@@ -9048,9 +9057,9 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-loader@~0.5.1:
+raw-loader@^0.5.1, raw-loader@~0.5.1:
   version "0.5.1"
-  resolved "https://registry.npmmirror.com/raw-loader/-/raw-loader-0.5.1.tgz"
+  resolved "https://registry.npmmirror.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
   integrity sha512-sf7oGoLuaYAScB4VGr0tzetsYlS8EJH6qnTCfQ/WVEa89hALQ4RQfCKt5xCyPQKPDUbVUAIP1QsxAwfAjlDp7Q==
 
 rc@^1.2.8: