From 785c6a471a73653d849c6c3aecfe668be8f74c1a Mon Sep 17 00:00:00 2001
From: dai <851733175@qq.com>
Date: Mon, 4 Jul 2022 17:03:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=88=E4=BA=8E=E5=B7=AE=E4=B8=8D=E5=A4=9A?=
 =?UTF-8?q?=E5=81=9A=E5=AE=8C=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../communityParty/article/cpts/offline.vue   | 221 ++++++++++++++++++
 .../modules/communityParty/article/drafts.vue |   2 +-
 .../modules/communityParty/article/index.vue  |  61 ++++-
 src/views/modules/cpts/base/cpts/edit.vue     |  82 +++++--
 src/views/modules/cpts/base/index.vue         |  14 +-
 5 files changed, 350 insertions(+), 30 deletions(-)
 create mode 100644 src/views/modules/communityParty/article/cpts/offline.vue

diff --git a/src/views/modules/communityParty/article/cpts/offline.vue b/src/views/modules/communityParty/article/cpts/offline.vue
new file mode 100644
index 00000000..8a5eee90
--- /dev/null
+++ b/src/views/modules/communityParty/article/cpts/offline.vue
@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <el-form
+        ref="ref_form"
+        :inline="true"
+        :model="fmData"
+        :rules="dataRule"
+        class="form"
+      >
+        <el-form-item
+          label="文章名称"
+          prop="title"
+          label-width="150px"
+          style="display: block"
+        >
+          <div style="width: 610px">
+            {{ fmData.title || "--" }}
+          </div>
+        </el-form-item>
+
+        <el-form-item
+          label="下线网格	"
+          prop="gridIdList"
+          label-width="150px"
+          style="display: block"
+        >
+          <el-cascader
+            v-model="fmData.gridIdList"
+            placeholder="请选择"
+            :options="gridOptions"
+            :props="{
+              multiple: true,
+              value: 'value',
+              label: 'label',
+              children: 'children',
+              checkStrictly: false,
+              emitPath: false,
+            }"
+            :show-all-levels="false"
+            size="small"
+            clearable
+            class="item-select"
+            style="width: 500px"
+            @change="handleChangeCascader"
+          >
+          </el-cascader>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="div_btn resi-btns">
+      <el-button size="small" @click="handleCancle">取 消</el-button>
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="btnDisable"
+        @click="handleComfirm"
+        >确 定</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  props: {},
+
+  data() {
+    return {
+      btnDisable: false,
+
+      fmData: {
+        articleId: "",
+        title: "",
+        gridIdList: [],
+      },
+
+      gridOptions: [],
+    };
+  },
+  components: {},
+  computed: {
+    dataRule() {
+      return {
+        gridIdList: [
+          { required: true, message: "下线网格不能为空", trigger: "blur" },
+        ],
+      };
+    },
+  },
+  watch: {},
+
+  async mounted() {},
+
+  methods: {
+    handleChangeCascader(e) {
+      console.log(e);
+    },
+    async initForm({ articleId, title }) {
+      this.fmData.articleId = articleId;
+      this.fmData.title = title;
+      this.fmData.gridIdList = [];
+      this.gridOptions = [];
+      this.getGridOpitons(articleId);
+    },
+
+    async getGridOpitons(articleId) {
+      const url = "/gov/voice/article/publishgridlist";
+      const params = {
+        articleId,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        function poll(list) {
+          return list.map((item) => {
+            return {
+              label: item.agencyName,
+              value: item.agencyId,
+              type: "agency",
+              children: [
+                ...poll(item.subAgencyGridList),
+                ...item.gridList.map((grid) => ({
+                  label: grid.gridName,
+                  value: grid.gridId,
+                  type: "grid",
+                })),
+              ],
+            };
+          });
+        }
+        let gridOptions = poll([data.agencyGridList]);
+        console.log(gridOptions);
+        this.gridOptions = gridOptions;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    async handleComfirm() {
+      this.btnDisable = true;
+      setTimeout(() => {
+        this.btnDisable = false;
+      }, 5000);
+      this.$refs["ref_form"].validate((valid, messageObj) => {
+        if (!valid) {
+          app.util.validateRule(messageObj);
+          this.btnDisable = false;
+        } else {
+          this.submit();
+        }
+      });
+    },
+
+    async submit() {
+      let url = "/gov/voice/article/offlinearticle";
+
+      let params = { ...this.fmData };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "操作成功",
+        });
+        this.$emit("afterOffline");
+        this.btnDisable = false;
+      } else {
+        this.btnDisable = false;
+        this.$message.error(msg);
+      }
+    },
+
+    handleCancle() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.item_width_1 {
+  width: 500px;
+}
+.item_width_2 {
+  width: 400px;
+}
+.item_width_3 {
+  margin-left: 10px;
+  width: 200px;
+}
+.item_width_4 {
+  width: 200px;
+}
+
+.div_map {
+  margin-top: 10px;
+}
+
+.div_btn {
+  // display: flex;
+  // justify-content: flex-end;
+}
+.el-tabs {
+  margin: 0 20px;
+}
+.el-upload__tip {
+  color: rgb(155, 155, 155);
+  margin: 0;
+}
+.form {
+  margin-top: 30px;
+}
+
+.attachement-list {
+}
+</style>
diff --git a/src/views/modules/communityParty/article/drafts.vue b/src/views/modules/communityParty/article/drafts.vue
index 36b4bdd6..69582150 100644
--- a/src/views/modules/communityParty/article/drafts.vue
+++ b/src/views/modules/communityParty/article/drafts.vue
@@ -314,7 +314,7 @@ export default {
                 } else if (item.contentType == "img") {
                   return `<img src="${item.content}" style="max-width:100%"></img>`;
                 } else if (item.contentType == "video") {
-                  return `<video src="${item.content}" style="max-width:100%"></video>`;
+                  return `<video src="${item.content}" style="max-width:100%" controls></video>`;
                 } else if (item.contentType == "file") {
                   return `<a src="${item.content}" target="_blank">附件：${item.fileName}</a>`;
                 }
diff --git a/src/views/modules/communityParty/article/index.vue b/src/views/modules/communityParty/article/index.vue
index e4ec2984..23ccd330 100644
--- a/src/views/modules/communityParty/article/index.vue
+++ b/src/views/modules/communityParty/article/index.vue
@@ -33,7 +33,38 @@
           >存草稿</el-button
         >
       </template>
+
+      <template v-slot:listBtnSup="{ item }">
+        <el-button
+          v-if="
+            item.statusFlag == 'published' &&
+            item.agencyId == $store.state.user.agencyId
+          "
+          @click="handleOfflineShow(item)"
+          type="text"
+          size="small"
+          style="color: #666"
+          >下线</el-button
+        >
+      </template>
     </base-page>
+
+    <el-dialog
+      :visible.sync="offlineShowed"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="下线"
+      width="850px"
+      top="5vh"
+      class="dialog-h"
+      @closed="offlineShowed = false"
+    >
+      <offline
+        ref="offlineForm"
+        @close="offlineShowed = false"
+        @afterOffline="handleOfflineSuccess"
+      ></offline>
+    </el-dialog>
   </div>
 </template>
 
@@ -42,12 +73,16 @@ import basePage from "@/views/modules/cpts/base/index";
 import { getItemByIdInCascader, collapse } from "@/utils/cascader";
 import { requestPost } from "@/js/dai/request";
 import dateFormat from "dai-js/tools/dateFormat.js";
+import offline from "./cpts/offline";
+import nextTick from "dai-js/tools/nextTick";
 
 export default {
   props: {},
 
   data() {
     return {
+      offlineShowed: false,
+
       draftBtnDisable: false,
 
       searchParams: [
@@ -144,7 +179,7 @@ export default {
           type: "array",
           arrayDiv: "、",
         },
-        { field: "状态", keyName: "statusFlag", type: "text" },
+        { field: "状态", keyName: "statusFlagName", type: "text" },
         { field: "发布单位", keyName: "publisherName", type: "text" },
         { field: "发布时间", keyName: "publishDate", type: "text" },
         {
@@ -192,9 +227,9 @@ export default {
           limit: 1,
           editDisabled: true,
           rules: [],
-          value: [],
+          value: () => [],
           supKeys: ["imgUrlArr", "imgUrl"],
-          supValues: [[], ""],
+          supValues: [() => [], ""],
           beforeImgUpload(file, item, that) {
             console.log(file);
             const isLt1M = file.size / 1024 / 1024 < 10;
@@ -215,9 +250,9 @@ export default {
           field: "发布范围",
           keyName: "gridIdList",
           type: "cascader",
-          value: [],
+          value: () => [],
           supKeys: ["publishRangeDesc"],
-          supValues: [[]],
+          supValues: [() => []],
           optionUrl: "/gov/org/customeragency/agencygridtree",
           optionUrlParams: {
             agencyId: this.$store.state.user.agencyId,
@@ -402,7 +437,7 @@ export default {
                 } else if (item.contentType == "img") {
                   return `<img src="${item.content}" style="max-width:100%"></img>`;
                 } else if (item.contentType == "video") {
-                  return `<video src="${item.content}" style="max-width:100%"></video>`;
+                  return `<video src="${item.content}" style="max-width:100%" controls></video>`;
                 } else if (item.contentType == "file") {
                   return `<a src="${item.content}" target="_blank">附件：${item.fileName}</a>`;
                 }
@@ -426,13 +461,25 @@ export default {
       },
     };
   },
-  components: { basePage },
+  components: { basePage, offline },
   computed: {},
   watch: {},
 
   async mounted() {},
 
   methods: {
+    async handleOfflineShow(item) {
+      console.log(item);
+      this.offlineShowed = true;
+      await nextTick(100);
+      this.$refs.offlineForm.initForm(item);
+    },
+
+    handleOfflineSuccess() {
+      this.$refs.basePage.refresh();
+      this.offlineShowed = false;
+    },
+
     async handleClickDraft(fmData) {
       let url = this.addUrl;
       let params = {
diff --git a/src/views/modules/cpts/base/cpts/edit.vue b/src/views/modules/cpts/base/cpts/edit.vue
index 933fc02d..d451ecc2 100644
--- a/src/views/modules/cpts/base/cpts/edit.vue
+++ b/src/views/modules/cpts/base/cpts/edit.vue
@@ -85,7 +85,7 @@
                 size="small"
                 clearable
                 show-word-limit
-                :format="item.format || 'yyyy-MM-dd'"
+                :value-format="item.format || 'yyyy-MM-dd'"
                 :placeholder="item.placeholder || '请输入'"
               >
               </el-date-picker>
@@ -163,9 +163,14 @@
                   v-model="fmData[item.keyName]"
                   :customerId="customerId"
                   :placeholder="item.placeholder || '请输入'"
+                  :height="500"
                 />
               </div>
-              <div v-else class="item-show" @click="handleClickHtmlNode">
+              <div
+                v-else
+                class="item-rich-text z-show"
+                @click="handleClickHtmlNode"
+              >
                 <div v-html="fmData[item.keyName]"></div>
               </div>
             </template>
@@ -187,6 +192,10 @@
 
             <template v-else-if="item.type == 'upload'">
               <el-upload
+                v-if="
+                  formType == 'add' || (formType == 'edit' && !item.editDisable)
+                "
+                ref="upload"
                 class="avatar-uploader"
                 :action="uploadUrl"
                 :data="{ customerId: customerId }"
@@ -196,12 +205,21 @@
                 :file-list="fmData[item.keyName]"
                 :on-success="(res, file) => handleImgSuccess(res, file, item)"
                 :on-remove="(res) => handleImgRemove(res, item)"
+                :on-exceed="(res) => handleImgExceed(res, item)"
                 :before-upload="(file) => beforeImgUpload(file, item)"
               >
                 <a
                   ><i class="el-icon-plus avatar-uploader-icon"></i> 点击上传</a
                 >
               </el-upload>
+              <el-image
+                v-else-if="fmData[item.keyName].length > 0"
+                style="width: 100px; height: 50px"
+                :src="fmData[item.keyName][0].url"
+                fit="cover"
+                :preview-src-list="fmData[item.keyName].map((item) => item.url)"
+              ></el-image>
+              <span v-else>--</span>
             </template>
 
             <template v-else-if="item.type == 'address'">
@@ -212,6 +230,7 @@
                   v-model="fmData[item.keyName]"
                   :maxlength="item.maxlength || ''"
                   show-word-limit
+                  size="small"
                 >
                 </el-input>
                 <el-button
@@ -409,10 +428,12 @@ export default {
     iniFmData() {
       const { editParams, fmData, editParamsDiv } = this;
       editParams.forEach((item, index) => {
-        fmData[item.keyName] = item.value || "";
+        fmData[item.keyName] =
+          typeof item.value == "function" ? item.value() : "";
         if (item.supValues) {
           item.supValues.forEach((value, index) => {
-            fmData[item.supKeys[index]] = value;
+            fmData[item.supKeys[index]] =
+              typeof value == "function" ? value() : "";
           });
         }
 
@@ -509,17 +530,29 @@ export default {
       }
     },
 
+    handleImgExceed(res, item) {
+      console.log(e);
+      // this.$message({
+      //   type: "warning",
+      //   message: "文件数量最多不超过三个",
+      // });
+    },
+
     handleImgSuccess(res, file, item) {
       console.log("handleImgSuccess", res);
       if (res.code === 0 && res.msg === "success") {
         let { fmData } = this;
-        let picItem = {
-          url: res.data.url,
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          format: file.name.split(".").pop(),
-        };
+        // let picItem = {
+        //   url: res.data.url,
+        //   name: file.name,
+        //   size: file.size,
+        //   type: file.type,
+        //   format: file.name.split(".").pop(),
+        // };
+        let picItem = file;
+        picItem.url = res.data.url;
+        picItem.format = file.name.split(".").pop();
+
         if (Array.isArray(this.fmData[item.keyName])) {
           this.fmData[item.keyName].push(picItem);
         } else {
@@ -760,6 +793,7 @@ export default {
           type: "success",
           message: "操作成功",
         });
+        this.handleCancle();
         this.$emit("afterEdit");
         this.btnDisable = false;
       } else {
@@ -785,29 +819,39 @@ export default {
       flex-wrap: wrap;
 
       .item {
-        width: 50%;
+        min-width: 45%;
+
+        .item-rich-text {
+          width: 817px;
+          &.z-show {
+            box-sizing: border-box;
+            padding: 15px;
+            border: 1px solid #eee;
+            height: auto;
+          }
+        }
       }
     }
 
     .item-show {
-      width: 225px;
+      width: 324px;
     }
 
     .item-input {
-      width: 225px;
+      width: 324px;
     }
     .item-select {
-      width: 225px;
+      width: 324px;
     }
     .item-number {
-      width: 125px;
+      width: 180px;
     }
 
     .address-item {
-      width: 450px;
+      width: 350px;
 
       .address-item-input {
-        width: 85%;
+        width: 74%;
       }
       .address-item-input2 {
         margin-left: 5px;
@@ -818,7 +862,7 @@ export default {
 
   .item-rich-text {
     width: 600px;
-    height: 450px;
+    height: 500px;
     img {
       max-width: 100%;
     }
diff --git a/src/views/modules/cpts/base/index.vue b/src/views/modules/cpts/base/index.vue
index 5fef8acd..79bed9c6 100644
--- a/src/views/modules/cpts/base/index.vue
+++ b/src/views/modules/cpts/base/index.vue
@@ -58,7 +58,7 @@
                   type="date"
                   placeholder="开始时间"
                   style="width: 150px"
-                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd"
                   clearable
                 >
                 </el-date-picker>
@@ -68,7 +68,7 @@
                   type="date"
                   placeholder="结束时间"
                   style="width: 150px"
-                  format="yyyy-MM-dd"
+                  value-format="yyyy-MM-dd"
                   clearable
                 >
                 </el-date-picker>
@@ -221,6 +221,8 @@
                   >删除</el-button
                 >
               </el-popconfirm>
+
+              <slot name="listBtnSup" v-bind:item="scope.row"></slot>
             </template>
           </el-table-column>
         </el-table>
@@ -253,6 +255,7 @@
       @closed="handleClose"
     >
       <edit-form
+        v-if="formShow"
         ref="editForm"
         :idName="idName"
         :formId="formId"
@@ -440,6 +443,7 @@ export default {
     await nextTick(100);
     this.computeSearchHeight();
   },
+
   methods: {
     computeSearchHeight() {
       this.ref_search_height = this.$refs["ref_search"].clientHeight;
@@ -677,8 +681,12 @@ export default {
       return fmData;
     },
 
+    refresh() {
+      this.getTableData();
+    },
+
     async getTableData() {
-      const { tableUrl: url, searchParams } = this;
+      const { tableUrl: url } = this;
       if (!url) return;
 
       const { pageSize, pageNo } = this;