epmet-work-pc-chengyang/src/views/modules/communityParty/comPromotion/index.vue

<template>
  <div>
    <base-page ref="basePage" :cookTableData="cookTableData" :searchParams="searchParams" :tableParams="tableParams"
      :tableUrl="tableUrl" :addUrl="addUrl" :editUrl="editUrl" :delUrl="delUrl" :editAuth="editAuth" :delAuth="delAuth"
      :infoUrl="infoUrl" :exportUrl="exportUrl" :importUrl="importUrl" :mubanUrl="mubanUrl" :editParams="editParams"
      :editFixedParams="editFixedParams" :editElseRules="editElseRules" :editConfig="editConfig" :editParamsDiv="5"
      :editBtnName="(item) => '修改'" :formBtnFixed="true" idName="articleId">
      <!-- <template v-slot:editOperateSup="{ id, formType, info }">
        <el-button v-if="formType == 'add'" type="warning" size="small" :disabled="draftBtnDisable"
          @click="handleClickDraft(info)">存草稿</el-button>
      </template> -->

      <template v-slot:listBtnSup="{ item }">
        <el-button v-if="item.status == '已发布'" @click="handleOfflineShow(item)" type="text" size="small"
          style="color: #0056d7">下线</el-button>
        <el-button v-else @click="handleOnlineShow(item)" type="text" size="small" style="color: #0056d7">
          上线
        </el-button>
      </template>
      <!-- <template v-slot:handlecheck="{ item }">
 
        <el-button type="text" size="small" style="color: #0056d7"  @click="handleOnCheck(item)">
          查看
        </el-button>
      </template>
       -->
      <template v-slot:listBtnbefore="{ item }">
        <el-button v-if="item.Top == '1'" v-show="item.statusFlag == 'published'"
          @click="handleCancleTopArticle(item, 'cancel_top')" type="text" size="small"
          style="color: #fe6252">取消置顶</el-button>
        <el-button v-show="item.statusFlag == 'published'" v-else @click="handleTopArticle(item, 'top')" type="text"
          size="small" style="color: #22c1c3">置顶</el-button>
      </template>

    </base-page>
  </div>

</template>
<script>
import { requestPost } from "@/js/dai/request";
import basePage from "@/views/modules/cpts/base/index";
import { getItemByIdInCascader, collapse } from "@/utils/cascader";

import dateFormat from "dai-js/tools/dateFormat.js";

export default {
  data() {
    return {
      offlineShowed: false,
      draftBtnDisable: false,
      searchParams: [
        { field: "文章标题", keyName: "title", type: "input" },
        {
          field: "标签",
          keyName: "tagIds",
          type: "select",
          multiple: true,
          optionUrl: "/gov/voice/tag/taglist",
          optionUrlParams: {},
          optionList: [],
          optionCook(list) {
            return list.map((item) => ({
              label: item.tagName,
              value: item.tagId,
            }));
          },
        },
        {
          field: "状态",
          keyName: "statusFlag",
          value: "",
          type: "select",
          optionUrl: "",
          optionUrlParams: {},
          optionList: [
            {
              label: "已发布",
              value: "published",
            },
            {
              label: "已下线",
              value: "offline",
            },
          ],
        },
        {
          field: "发布范围",
          keyName: "publishRangeIds",
          type: "cascader",
          optionUrl: "/gov/org/customeragency/agencygridtree",
          optionUrlParams: {
            agencyId: this.$store.state.user.agencyId,
          },
          optionList: [],
          optionProps: {
            multiple: false,
            value: "agencyId",
            label: "agencyName",
            children: "subAgencyList",
            checkStrictly: true,
          },
          optionCook(obj) {
            return [obj];
          },
          supKeys: ["publishRangeId", "publishRangeType"],
          supValues: ["", ""],
          handleChangeFn(vals, item) {
            const { optionList } = item;
            if (vals.length > 0) {
              item["supValues"][0] = vals[vals.length - 1];
              item["supValues"][1] = getItemByIdInCascader(
                optionList,
                vals,
                "agencyId",
                "subAgencyList"
              )[vals.length - 1]["level"];
              item["supValues"][1] =
                item["supValues"][1] == "grid" ? "grid" : "agency";
            } else {
              item["supValues"][0] = "";
              item["supValues"][1] = "";
            }
          },
        },
        {
          field: "发布时间",
          keyName: "publishTime",
          type: "date-range",
          supKeys: ["startDate", "endDate"],
          supValues: ["", ""],
       
        },
      ],
      tableParams: [
        { field: "序号", keyName: "", type: "no" },
        { field: "文章标题", keyName: "title", type: "text" },
        {
          field: "标签",
          keyName: "tagId",
          type: "text",
          arrayDiv: "、",
        },
        { field: "状态", keyName: "status", type: "text" },
        { field: "发布单位", keyName: "publisherName", type: "text" },
        { field: "发布时间", keyName: "releaseTime", type: "text" },
        {
          field: "发布范围",
          keyName: "publishRangeDesc",
          type: "text",
        },
        { field: "置顶", keyName: "top", type: "text" },
        { field: "点赞数", keyName: "likeCount", type: "text" },
        { field: "转发量", keyName: "forwardCount", type: "text" },
      ],
      cookTableData(tableData) {
       let tabledata= tableData.map((item) => {
        console.log(item)
        item.status=item.status?"已发布":"已下线"
        item.top=item.top?"是":"否"
        return item;
      }
      )
      console.log(tabledata)
      return tabledata;
      },
      cookParams(params) {
        let newParams = {};
        if (params.publishRangeType == "grid") {
          newParams["gridId"] = params.publishRangeId;
        } else {
          newParams["agencyId"] = params.publishRangeId;
        }
        newParams["startDate"] = params.startDate;
        newParams["endDate"] = params.endDate;
        return newParams;
    
      
    },

      tableUrl: "/actual/base/communityPublicity/page",
      mubanUrl: "",
      importUrl: "",
      exportUrl: "",

      addUrl: "/actual/base/communityPublicity/save",
      editUrl: "/actual/base/communityPublicity/updateStatus",
      infoUrl: "/actual/base/communityPublicity/updateStatus",
      delUrl: "/gov/voice/article/delete批量",
      editAuth(item) {
        if(item.status=="已下线"){
          console.log("我执行了")
          return true;
        }
      },
      delAuth(item) {
        if(item.status=="已下线"){
          console.log("我执行了")
          return true;
        }
      },

      editParams: [
        {
          field: "文章标题",
          keyName: "title",
          type: "input",
          maxlength: 50,
          editDisabled: true,
          rules: [
            {
              required: true,
              message: "文章标题不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "封面图片",
          keyName: "imgArr",
          type: "upload",
          limit: 1,
          listType: "picture-card",
          editDisabled: true,
          rules: [],
          value: () => [],
          uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/article/upload",
          supKeys: ["imgUrlArr", "coverPic"],
          supValues: [() => [], ""],
          beforeImgUpload(file, item, that) {
            console.log(file);
            const isLt1M = file.size / 1024 / 1024 < 10;
            const srcType = file.type;

            if (!isLt1M) {
              that.$message.error("上传文件大小不能超过 10MB!");
              return false;
            }
            if (srcType.indexOf("image") == -1) {
              that.$message.error("仅限图片格式");
              return false;
            }
            return true;
          },
        },
        // {
        //   field: "发布范围",
        //   keyName: "gridIdList",
        //   type: "cascader",
        //   value: () => [],
        //   supKeys: ["publishRangeDesc"],
        //   supValues: [""],
        //   optionUrl: "/gov/org/customeragency/agencygridtree",
        //   optionUrlParams: {
        //     agencyId: this.$store.state.user.agencyId,
        //   },
        //   optionList: [],
        //   optionProps: {
        //     multiple: true,
        //     value: "agencyId",
        //     label: "agencyName",
        //     children: "subAgencyList",
        //     checkStrictly: false,
        //     emitPath: false,
        //   },
        //   optionCook(obj) {
        //     return [obj];
        //   },
        //   handleChangeFn(vals, item, that) {
        //     console.log("handleChangeFn", vals);
        //     const { optionList } = item;
        //     const optionPlaneList = collapse(optionList, "subAgencyList");
        //     if (vals.length > 0) {
        //       let selectedList = vals.map(
        //         (v) =>
        //           getItemByIdInCascader(
        //             optionPlaneList,
        //             [v],
        //             "agencyId",
        //             "subAgencyList"
        //           )[0]
        //       );
        //       console.log("handleChangeFn", selectedList);
        //       let selectedFilterList = selectedList.filter(
        //         (a) => a.level == "grid"
        //       );
        //       that.fmData[item["keyName"]] = selectedFilterList.map(
        //         (a) => a.agencyId
        //       );
        //       that.fmData[item["supKeys"][0]] = selectedFilterList
        //         .map((a) => a.agencyName)
        //         .join("、");
        //     } else {
        //     }
        //   },
        //   rules: [
        //     {
        //       required: true,
        //       message: "发布范围不能为空",
        //       trigger: "blur",
        //     },
        //   ],
        // },
        {
          field: "发布时间",
          keyName: "releaseTime",
          type: "date",
          value: dateFormat(new Date(), "yyyy-MM-dd  hh:mm:ss"),
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          rules: [
            {
              required: true,
              message: "发布时间不能为空",
              trigger: "blur",
            },
          ],
        },
        // {
        //   field: "发布单位",
        //   keyName: "publisher",
        //   type: "select",
        //   optionUrl: "/gov/voice/article/publishagencylist",
        //   optionList: [],
        //   optionType: "group",
        //   supKeys: ["publisherName", "publisherType"],
        //   supValues: ["", ""],
        //   optionCook(data) {
        //     let ret = [];
        //     const { agencyDeptList, agencyGridList, agencyId, agencyName } =
        //       data;
        //     if (agencyId) {
        //       ret.push({
        //         label: "以组织名义",
        //         optionList: [
        //           {
        //             label: agencyName,
        //             value: agencyId,
        //             type: "agency",
        //           },
        //         ],
        //       });
        //     }
        //     if (Array.isArray(agencyDeptList) && agencyDeptList.length > 0) {
        //       ret.push({
        //         label: "以部门名义",
        //         optionList: [
        //           ...agencyDeptList.map((d) => ({
        //             label: d.agencyDeptName,
        //             value: d.departmentId,
        //             type: "department",
        //           })),
        //         ],
        //       });
        //     }
        //     if (Array.isArray(agencyGridList) && agencyGridList.length > 0) {
        //       ret.push({
        //         label: "以网格名义",
        //         optionList: [
        //           ...agencyGridList.map((d) => ({
        //             label: d.agencyGridName,
        //             value: d.gridId,
        //             type: "grid",
        //           })),
        //         ],
        //       });
        //     }
        //     return ret;
        //   },
        //   handleChangeFn(vals, item, that) {
        //     const { optionList } = item;
        //     let opts = [];
        //     optionList.forEach((g) => {
        //       opts = [...opts, ...g.optionList];
        //     });
        //     let publisher = opts.find((p) => vals == p.value);
        //     that.fmData[item["supKeys"][0]] = publisher.label;
        //     that.fmData[item["supKeys"][1]] = publisher.type;
        //   },
        //   rules: [
        //     {
        //       required: true,
        //       message: "发布单位不能为空",
        //       trigger: "blur",
        //     },
        //   ],
        // },
        {
          field: "文章标签",
          keyName: "tagId",
          type: "select",
          multiple: false,
          filterable: true,
          allowCreate: true,
          optionUrl: "/gov/voice/tag/taglist",
          optionUrlParams: {},
          optionList: [ { label: '标签1', value: 'tag1' },
          { label: '标签2', value: 'tag2' },
          { label: '标签3', value: 'tag3' }],
          optionCook(list) {
            return list.map((item) => ({
              label: item.tagName,
              value: item.tagName,
            }));
          },
          // rules: [
          //   {
          //     required: true,
          //     message: "文章标签不能为空",
          //     trigger: "blur",
          //   },
          // ],
        },
        {
          field: "内容",
          keyName: "content",
          type: "rich-text",
          rules: [
            {
              required: true,
              message: "内容不能为空",
              trigger: "blur",
            },
          ],
        },
        {
          field: "置顶",
          keyName: "top",
          type: "switch",
          activeValue: 1,
          inactiveValue: 0,
        },
        {
          field: "消息推送",
          keyName: "sendMsg",
          type: "checkbox",
          optionList:"是否通过公众号推送给社区居民",
          activeValue: 1,
          inactiveValue: 0
          
        },
      ],
      editFixedParams: {
        // type: "article",
        status:1
      },
      editElseRules: {},
      editConfig: {
        confirmBtnName: "发布",
        cookInfoFn(data) {
          if (data.richTextFlag == "0") {
            data.content = data.contentList
              .map((item) => {
                if (item.contentType == "text") {
                  return `<p>${item.content}</p>`;
                } 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%" controls></video>`;
                } else if (item.contentType == "file") {
                  return `<a src="${item.content}" target="_blank">附件：${item.fileName}</a>`;
                }
              })
              .join(" ");
          } else {
            data.content = data.contentList[0].content;
          }
          if (data.imgUrl) {
            data.imgArr = [
              {
                name: "封面",
                url: data.imgUrl,
              },
            ];
            data.imgUrlArr = [data.imgUrl];
          }

          return data;
        },

        beforeSubmit(formType, fmData, that) {
          if (fmData.isTop == "1" && !fmData.imgUrl) {
            that.$message.error("请上传封面图片");
            return false;
          }
          return true;
        },
      },

      formData: {},
      showAddImage: false,
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
      replayImgList: [],
      hideUploadBtn: false,
      selType: "top",
      selArticleId: "",
      selImgUrl: "",
      async  handleOfflineShow(item){
        const { data, code, msg } = await requestPost(this.editUrl, {
        id:item.id,status:0
      });
      if (code === 0) {
          console.log("请求检索基础数据成功！");
        // 触发父组件的更新方法
        this.$emit('status-changed', { ...item, status: '已发布' });
        this.cookTableData
          
      } else {
        this.$message.error("请求检索基础数据失败！");
      }
      },
      handleOnCheck(item){
        console.log(item);

      },
      async handleOnlineShow(item) {
      const { data, code, msg } = await requestPost(this.editUrl, {
        id: item.id,
        status: 1
      });
      if (code === 0) {
        console.log("请求检索基础数据成功！");
        // 触发父组件的更新方法
        this.$emit('status-changed', { ...item, status: '已发布' });
      } else {
        this.$message.error("请求检索基础数据失败！");
      }
    }
    };
  },
  components: { basePage }

}
</script>
<style lang="scss"></style>