目录代码整合

packages/publicity/AppPublicizeInformation/Add.vue

@@ -0,0 +1,235 @@
+<template>
+  <section class="Add">
+    <ai-detail>
+      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
+      <template #content>
+        <el-form :model="form" ref="ruleForm" :rules="rules" label-width="130px" label-position="right" size="small">
+          <ai-card title="基本信息">
+            <template #content>
+              <el-form-item label="标题" prop="title">
+                <el-input v-model="form.title" placeholder="请输入标题" :maxlength="50" show-word-limit/>
+              </el-form-item>
+              <el-form-item label="发布地区" prop="areaId">
+                <ai-area-get :instance="instance" v-model="form.areaId" :root="rootArea" />
+              </el-form-item>
+              <el-form-item label="文章类型" prop="moduleId" style="width:50%;" v-if="miniTypeList.length">
+                <ai-select v-model="form.moduleId" :selectList="miniTypeList" @change="getNewTypeList"/>
+              </el-form-item>
+              <el-form-item label="分类" prop="categoryId"  style="width:50%;">
+                <ai-select v-model="form.categoryId" :selectList="newTypeList"/>
+              </el-form-item>
+              <el-form-item label="正文" prop="content" style="width: 100%;">
+                <ai-editor v-model="form.content" :instance="instance"/>
+              </el-form-item>
+              <el-form-item label="封面图片" >
+                <ai-uploader
+                  :isShowTip="true"
+                  :instance="instance"
+                  v-model="form.pictureUrlList"
+                  fileType="img"
+                  acceptType=".png,.jpg,.jpeg"
+                  :limit="1">
+                  <template slot="tips">最多上传1张图片,单张图片最大10MB<br/>支持.png,.jpg,.jpeg格式</template>
+                </ai-uploader>
+              </el-form-item>
+              <el-form-item label="附件附件" prop="files">
+                <el-upload
+                    class="upload-demo"
+                    action
+                    multiple
+                    accept=".zip,.rar,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,.jpg,.png"
+                    :http-request="uploadFile"
+                    :on-exceed="()=>$message.error('最多只能上传9个附件!')"
+                    :on-remove="handleRemove"
+                    :on-change="handleChange"
+                    :limit="9"
+                    :file-list="form.files">
+                  <el-button size="mini"> 添加附件</el-button>
+                  <div slot="tip" class="el-upload__tip">
+                    <p style="line-height: 0;">最多上传9个附件,单个文件最大10MB </p>
+                    <p style="line-height: 40px;">
+                      支持.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt、.jpg、.png格式</p>
+                  </div>
+                </el-upload>
+              </el-form-item>
+            </template>
+          </ai-card>
+        </el-form>
+      </template>
+      <template #footer>
+        <el-button @click="back">取消</el-button>
+        <el-button type="primary" @click="submit">提交</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+
+export default {
+  name: "Add",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    ...mapState(['user']),
+    isEdit() {
+      return !!this.$route.query.id
+    },
+    addTitle() {
+      return this.isEdit ? "编辑新闻发布" : "添加新闻发布"
+    },
+    rules() {
+      return {
+        title: [{required: true, message: "请输入标题"}],
+        areaId: [
+          {message: "请选择发布地区", required: true, trigger: "blur"},
+          {validator: (r, v, cb) => v && /0{3}$/g.test(v) ? cb('发布地区必须选到村级') : cb(), trigger: "blur"}
+        ],
+        moduleId: [{required: true, message: "请选择文章类型"}],
+        categoryId: [{required: true, message: "选择分类"}],
+        content: [{required: true, message: "请输入正文"}],
+      }
+    },
+    rootArea() {
+      return this.user.info?.areaId?.replace(/(\d{6})\d+/g, '$1' + Array(7).join("0")) || ""
+    }
+  },
+  data() {
+    return {
+      form: {
+        pictureUrlList: [],
+        pictureUrl: '',
+        files: []
+      },
+      miniTypeList: [],
+      newTypeList: [],
+    }
+  },
+  methods: {
+    // 上传附件
+    uploadFile: function (file) {
+      const isLt10M = file.file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error("附件大小不超过10mb!");
+        for (let i = 0; i < this.form.files.length; i++) {
+          if (this.form.files[i].uid == file.file.uid) {
+            this.form.files.splice(i, 1);
+          }
+        }
+        return;
+      }
+      let formData = new FormData();
+      formData.append("file", file.file);
+      this.instance.post(`/admin/file/add`, formData, {withCredentials: false}).then(res => {
+        if (res && res.code == 0) {
+          let img = res.data[0].split(';');
+          this.form.files.forEach((item, index) => {
+            if (item.uid == file.file.uid) {
+              this.form.files[index].id = img[1];
+            }
+          })
+        }
+      });
+    },
+    handleRemove(file, fileList) {
+      this.form.files = fileList;
+    },
+    handleChange(file, fileList) {
+      this.form.files = fileList;
+    },
+    back() {
+      this.$router.push({})
+    },
+    submit() {
+      this.$refs.ruleForm.validate(v => {
+        if (v) {
+          if(this.form.pictureUrlList && this.form.pictureUrlList.length) {
+            this.form.pictureUrl = this.form.pictureUrlList[0].url
+          }
+          this.instance.post(`/app/apppublicityinfo/addOrUpdate`, this.form).then(res => {
+            if (res.code == 0) {
+              this.$message.success('提交成功!');
+              this.back()
+            }
+          })
+        }
+      })
+    },
+    getDetail() {
+      let {id} = this.$route.query
+      id && this.instance.post("/app/apppublicityinfo/queryDetailById", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          res.data.pictureUrlList = []
+          if(res.data.pictureUrl) {
+            res.data.pictureUrlList = [{url: res.data.pictureUrl}]
+          }
+          this.form = {...res.data}
+          this.getNewTypeList()
+        }
+      })
+    },
+    getTypeList() {
+      let {parentId} = this.$route.query
+      this.instance.post(`/app/apppublicitycategory/list?categoryType=1&size=100&parentId=${parentId}`).then(res => {
+        if (res.code == 0) {
+          this.miniTypeList = res.data.records.map((item) => {
+            return {
+              dictName: item.categoryName,
+              dictValue: item.id
+            }
+          })
+          console.log(this.miniTypeList)
+          if(this.$route.query.id) {
+            this.getDetail()
+          }
+        }
+      })
+    },
+    getNewTypeList() {
+      this.instance.post(`/app/apppublicitycategory/list?categoryType=2&size=100&parentId=${this.form.moduleId}`).then(res => {
+        if (res.code == 0) {
+          res.data.records
+          this.newTypeList = res.data.records.map((item) => {
+            return {
+              dictName: item.categoryName,
+              dictValue: item.id
+            }
+          })
+        }
+      })
+    },
+  },
+  created() {
+    this.getTypeList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Add {
+  height: 100%;
+
+  .half {
+    align-items: flex-start;
+
+    & > .el-form-item, & > div {
+      width: 50%;
+
+      .el-form-item {
+        width: 100%;
+      }
+    }
+  }
+
+  .el-date-editor {
+    width: 100%;
+  }
+}
+</style>

packages/publicity/AppPublicizeInformation/AppPublicizeInformation.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="AppPublicizeInformation">
+    <keep-alive :include="['List']">
+      <component :is="currentComponent" :instance="instance" :dict="dict" :permissions="permissions"/>
+    </keep-alive>
+  </section>
+</template>
+
+<script>
+
+import Add from "./Add";
+import List from "./List";
+
+export default {
+  name: "AppPublicizeInformation",
+  components: {List, Add},
+  label: "宣传资讯",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    currentComponent() {
+      return this.$route.hash == "#add" ? Add : List
+    }
+  },
+  created() {
+    this.dict.load("sex", "fpNation", "fpPrtpStatus", "fpHealth", "fpStudentsInSchool", 'fpYesOrNo', "fpRelationship", "yesOrNo", "fpLaborSkills", 
+    "fpEducation", "fpType", "fpPoliticalOutlook", "fpPublicWelfarePostAssistance","fpHealthAssistance","fpFnancialAssistance","fpEmploymentAssistance",
+    "fpEducationalAssistance","fpIndustrialAssistance","fpSocialAssistance")
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppPublicizeInformation {
+  height: 100%;
+}
+</style>

packages/publicity/AppPublicizeInformation/List.vue

@@ -0,0 +1,359 @@
+<template>
+  <section class="List">
+    <ai-list>
+      <ai-title slot="title" title="宣传资讯" isShowBottomBorder isShowArea v-model="search.areaId" :instance="instance"
+                @change="page.current=1,getTableData()">
+      </ai-title>
+      <template #content>
+        <div class="flex fill">
+          <div class="type">
+            <div class="title">宣传板块
+              <span>
+              <el-button type="text" @click="addType(0, typeList.length+1, '')">添加</el-button></span>
+            </div>
+            <div class="list">
+              <div class="item" v-for="(item, index) in typeList" :key="index"
+                   :class="typeIndex == index ? 'active' : ''" @click="typeClick(index)">
+                {{ item.categoryName }}
+              </div>
+              <div class="item" v-if="!typeList.length">暂无数据</div>
+            </div>
+          </div>
+          <div class="type mini-type">
+            <div class="title">模块名称<span><el-button type="text"
+                                                    @click="addType(1, miniTypeList.length+1, typeList[typeIndex].id)">添加</el-button></span>
+            </div>
+            <div class="list">
+              <div class="item" v-for="(item, index) in miniTypeList" :key="index"
+                   :class="miniTypeIndex == index ? 'active' : ''" @click="miniTypeClick(index)">
+                <span class="text">{{ item.categoryName }}</span>
+                <span class="icon">
+                  <i class="el-icon-circle-plus-outline" @click="addNewType(index)"></i>
+                  <i class="el-icon-edit" @click="editMini(index)"></i>
+                  <i class="el-icon-delete" @click="delMini(miniTypeList[index].id)"></i>
+                </span>
+              </div>
+              <div class="item" v-if="!miniTypeList.length">暂无数据</div>
+            </div>
+          </div>
+          <div class="content">
+            <template v-if="typeList.length && miniTypeList.length">
+              <ai-search-bar>
+                <template #left>
+                  <el-button type="primary" icon="iconfont iconAdd" @click="showEdit('')">添加</el-button>
+                  <!-- <el-button icon="iconfont iconDelete" :disabled="!ids.length" @click="handleDelete(ids)">删除</el-button> -->
+                </template>
+                <template #right>
+                  <el-input size="small" placeholder="请输入标题" v-model="search.title" clearable
+                            @change="page.current=1,getTableData()"/>
+                </template>
+              </ai-search-bar>
+              <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                        @getList="getTableData" :col-configs="colConfigs" :dict="dict"
+                        @selection-change="v=>ids=v.map(e=>e.id)">
+                <el-table-column slot="options" label="操作" fixed="right" align="center" width='150px'>
+                  <template slot-scope="{row}">
+                    <el-button type="text" @click="showEdit(row.id)">编辑</el-button>
+                    <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
+                  </template>
+                </el-table-column>
+              </ai-table>
+            </template>
+            <ai-empty v-else>请选择或者添加模块</ai-empty>
+          </div>
+        </div>
+      </template>
+    </ai-list>
+    <ai-dialog :visible.sync="dialog" :title="dialogTitle" @closed="form={}" @onConfirm="submitDialog" width="600px">
+      <el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="100px">
+        <el-form-item :label="addLabelText" prop="categoryName">
+          <el-input v-model.number="form.categoryName" placeholder="请输入" maxlength="10" show-word-limit/>
+        </el-form-item>
+        <el-form-item label="排序" prop="showIndex" v-if="type != 2">
+          <el-input-number v-model="form.showIndex" @change="handleChange" :min="1" :max="100"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <ai-table :tableData="newTypeList" :total="newPage.total" :current.sync="newPage.current"
+                :size.sync="newPage.size"
+                :col-configs="colConfigsNew" v-if="type == 2">
+        <el-table-column slot="options" label="操作" fixed="right" align="center">
+          <template slot-scope="{row}">
+            <el-button type="text" @click="editNew(row)">编辑</el-button>
+            <el-button type="text" @click="delMini(row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </ai-table>
+    </ai-dialog>
+  </section>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "List",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  data() {
+    return {
+      search: {title: ""},
+      page: {current: 1, size: 10, total: 0},
+      newPage: {current: 1, size: 10, total: 0},
+      tableData: [],
+      colConfigs: [
+        {label: "标题", prop: "title"},
+        {label: "地区", prop: "areaName", align: "center", width: '150px'},
+        {label: "浏览次数", prop: "viewCount", align: "center", width: '100px'},
+        {label: "发布人", prop: "createUserName", align: "center", width: '100px'},
+        {label: "发布时间", prop: "createTime", align: "center", width: '100px'},
+        {slot: "options"}
+      ],
+      colConfigsNew: [
+        {label: "分类名称", prop: "categoryName", align: "center"},
+        {slot: "options"}
+      ],
+      ids: [],
+      dialog: false,
+      form: {},
+      rules: {
+        categoryName: '',
+        showIndex: [{required: true, message: "请输入排序", trigger: "change"}],
+      },
+      typeList: [], //大分类模块
+      miniTypeList: [], //模块子
+      newTypeList: [], //文章分类
+      type: 0, //0、宣传板块；1、宣传模块；2、文章分类
+      dialogTitle: '',
+      addLabelText: '',
+      parentId: '',
+      typeIndex: 0,
+      miniTypeIndex: 0
+    }
+  },
+  methods: {
+    getTableData() {
+      this.instance.post("/app/apppublicityinfo/list", null, {
+        params: {...this.page, ...this.search, moduleId: this.miniTypeList[this.miniTypeIndex].id || ''}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data?.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+    showEdit(id) {
+      this.$router.push({
+        query: {
+          id: id,
+          parentId: this.typeList[this.typeIndex].id,
+          moduleId: this.miniTypeList[this.miniTypeIndex].id
+        }, hash: "#add"
+      })
+    },
+    handleDelete(ids) {
+      this.$confirm("是否删除该条宣传资讯信息").then(() => {
+        this.instance.post("/app/apppublicityinfo/delete", null, {
+          params: {ids: ids?.toString()}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getTableData()
+          }
+        })
+      }).catch(() => 0)
+    },
+    handleChange(value) {
+      this.form.showIndex = value
+    },
+    submitDialog() {
+      this.$refs.DialogForm.validate(v => {
+        if (v) {
+          this.form.categoryType = this.type
+          this.form.parentId = this.parentId
+          this.instance.post(`/app/apppublicitycategory/addPublicityCategory`, this.form).then(res => {
+            if (res.code == 0) {
+              this.$message.success('添加成功');
+              if (this.type == 0) {
+                this.getTypeList()
+              }
+              if (this.type == 1) {
+                this.getMiniTypeList(this.typeList[this.typeIndex].id)
+              }
+              this.dialog = false
+            }
+          })
+        }
+      })
+    },
+    addType(e, index, parentId) {
+      this.type = e
+      this.parentId = parentId
+      this.form.showIndex = index
+      this.dialogTitle = ['宣传板块', '宣传模块', '文章分类'][e]
+      this.addLabelText = ['板块名称', '模块名称', '分类名称'][e]
+      this.rules.categoryName = [{required: true, message: "请输入" + this.addLabelText, trigger: "change"}]
+      this.dialog = true
+    },
+    getTypeList() {
+      this.instance.post(`/app/apppublicitycategory/list?categoryType=0&size=100`).then(res => {
+        if (res.code == 0 && res.data.records && res.data.records.length) {
+          this.typeList = res.data.records
+          this.getMiniTypeList(res.data.records[0].id)
+        }
+      })
+    },
+    getMiniTypeList(parentId) {
+      this.instance.post(`/app/apppublicitycategory/list?categoryType=1&size=100&parentId=${parentId}`).then(res => {
+        if (res.code == 0) {
+          this.miniTypeList = res.data.records
+          if (res.data.records && res.data.records.length) {
+            this.miniTypeClick(0)
+          }
+
+        }
+      })
+    },
+    getNewTypeList(parentId) {
+      this.instance.post(`/app/apppublicitycategory/list?categoryType=2&size=10&parentId=${parentId}`).then(res => {
+        if (res.code == 0) {
+          this.newTypeList = res.data.records
+          this.newPage.total = res.data.total
+        }
+      })
+    },
+    typeClick(e) {
+      this.typeIndex = e
+      this.getMiniTypeList(this.typeList[e].id)
+    },
+    miniTypeClick(e) {
+      this.miniTypeIndex = e
+      this.current = 1
+      this.tableData = []
+      this.getTableData()
+    },
+    editMini(index) {
+      this.form = {...this.miniTypeList[index]}
+      this.addType(this.miniTypeList[index].categoryType, this.miniTypeList[index].showIndex, this.typeList[this.typeIndex].id)
+    },
+    delMini(id) {
+      this.$confirm("确认删除", {
+        type: 'error'
+      }).then(() => {
+        this.instance.post(`/app/apppublicitycategory/delete?ids=${id}`).then(res => {
+          if (res.code == 0) {
+            this.getNewTypeList(this.miniTypeList[this.miniTypeIndex].id)
+            this.getMiniTypeList(this.typeList[this.typeIndex].id)
+            this.$message.success('删除成功');
+          }
+        }).catch((err) => {
+          this.$message.error(err);
+        })
+      })
+    },
+    addNewType(index) {
+      this.getNewTypeList(this.miniTypeList[index].id)
+      this.addType(2, '', this.miniTypeList[index].id)
+    },
+    editNew(row) {
+      this.form = {...row}
+      this.addType(2, '', row.parentId)
+    }
+  },
+  created() {
+    this.search.areaId = this.user.info.areaId
+    this.getTypeList()
+    this.getTableData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.List {
+  height: 100%;
+
+  .flex {
+    display: flex;
+
+    .type {
+      width: 250px;
+      border: 1px solid #ddd;
+      box-sizing: border-box;
+
+      .title {
+        font-size: 16px;
+        line-height: 40px;
+        border-bottom: 1px solid #ddd;
+        padding: 0 16px;
+        font-weight: 600;
+
+        span {
+          color: #26f;
+          font-size: 12px;
+          font-weight: 400;
+          float: right;
+        }
+      }
+
+      .list {
+        .item {
+          padding: 0 16px;
+          display: flex;
+          justify-content: space-between;
+          line-height: 32px;
+          font-size: 14px;
+          color: #333;
+          box-sizing: border-box;
+
+          .text {
+            width: calc(100% - 70px);
+            cursor: pointer;
+          }
+
+          .icon {
+            width: 70px;
+            text-align: right;
+
+            i {
+              font-size: 14px;
+              cursor: pointer;
+              margin-left: 8px;
+            }
+
+            .el-icon-delete {
+              color: #f46;
+            }
+
+            .el-icon-circle-plus-outline {
+              color: #26f;
+            }
+          }
+        }
+
+        .active {
+          // color: #26f;
+          background-color: #f3f6f9;
+        }
+      }
+    }
+
+    .mini-type {
+      margin-right: 16px;
+    }
+
+    .content {
+      width: calc(100% - 516px);
+    }
+  }
+
+  ::v-deep .ai-list__content--right-wrapper {
+    min-height: calc(100% - 6px) !important;
+    display: flex;
+  }
+}
+</style>