党建声音开发中

src/utils/cascader.js

@@ -0,0 +1,19 @@
+/**
+ * 深度克隆
+ */
+export function getItemByIdInCascader(arr, vals, idName, childName) {
+  let item = arr.find((v) => v[idName] == vals[0]);
+  if (vals.length > 1) {
+    return [
+      item,
+      ...getItemByIdInCascader(
+        item[childName],
+        vals.slice(1),
+        idName,
+        childName
+      ),
+    ];
+  } else {
+    return [item];
+  }
+}

src/views/modules/communityParty/article/index.vue

@@ -16,13 +16,14 @@
       :editParams="editParams"
       :editElseRules="editElseRules"
       :editBtnName="(item) => (!item.latitude ? '待完善' : '修改')"
-      idName="icDangerousChemicalsId"
+      idName="articleId"
     ></base-page>
   </div>
 </template>
 
 <script>
 import basePage from "@/views/modules/cpts/base/index";
+import { getItemByIdInCascader } from "@/utils/cascader";
 
 export default {
   props: {},
@@ -32,43 +33,78 @@ export default {
       searchParams: [
         { field: "活动标题", keyName: "name", type: "input" },
         {
-          field: "分类",
-          keyName: "category",
+          field: "标签",
+          keyName: "tagIds",
           type: "select",
-          optionUrl: "/gov/org/coverage/dict-select-list/dangerous_chemicals",
+          multiple: true,
+          optionUrl: "/gov/voice/tag/taglist",
           optionUrlParams: {},
           optionList: [],
+          optionCook(list) {
+            return list.map((item) => ({
+              label: item.tagName,
+              value: item.tagId,
+            }));
+          },
         },
         {
           field: "状态",
-          keyName: "status",
+          keyName: "statusFlag",
+          value: "",
           type: "select",
           optionUrl: "",
           optionUrlParams: {},
           optionList: [
             {
               label: "全部",
-              value: "0",
+              value: "",
             },
             {
               label: "已发布",
-              value: "1",
+              value: "published",
             },
             {
               label: "已下线",
-              value: "2",
+              value: "offline",
             },
           ],
         },
         {
           field: "发布范围",
-          keyName: "dangerType",
-          type: "select",
-          optionUrl: "/sys/dict/data/dictlist",
+          keyName: "publishRangeIds",
+          type: "cascader",
+          optionUrl: "/gov/org/customeragency/agencygridtree",
           optionUrlParams: {
-            dictType: "ic_danger_type",
+            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"];
+            } else {
+              item["supValues"][0] = "";
+              item["supValues"][1] = "";
+            }
+          },
         },
         {
           field: "发布时间",
@@ -81,34 +117,43 @@ export default {
 
       tableParams: [
         { field: "序号", keyName: "", type: "no" },
-        { field: "企业名称", keyName: "name", type: "text" },
-        { field: "企业类别", keyName: "categoryName", type: "text" },
-        { field: "周边安全间距", keyName: "safeDistanceName", type: "text" },
-        { field: "危化品种类", keyName: "dangerTypeName", type: "text" },
-        { field: "经营地址", keyName: "address", type: "text" },
-        { field: "负责人", keyName: "principalName", type: "text" },
-        { field: "联系电话", keyName: "principalMobile", type: "text" },
-        { field: "备注", keyName: "remark", type: "text" },
+        { field: "活动标题", keyName: "title", type: "text" },
+        {
+          field: "标签",
+          keyName: "tagNameList",
+          type: "array",
+          arrayDiv: "、",
+        },
+        { field: "状态", keyName: "statusFlag", type: "text" },
+        { field: "发布单位", keyName: "publisherName", type: "text" },
+        { field: "发布时间", keyName: "publishDate", type: "text" },
+        {
+          field: "发布范围",
+          keyName: "publishRangeDesc",
+          type: "array",
+          arrayDiv: "、",
+        },
+        { field: "置顶", keyName: "isTopName", type: "text" },
       ],
-      tableUrl: "/gov/org/icDangerousChemicals/list",
-      mubanUrl: "/gov/org/icDangerousChemicals/download",
-      importUrl: "/gov/org/icDangerousChemicals/import",
-      exportUrl: "/gov/org/icDangerousChemicals/export",
+      tableUrl: "/gov/voice/article/articleListV2",
+      mubanUrl: "",
+      importUrl: "",
+      exportUrl: "",
 
-      addUrl: "/gov/org/icDangerousChemicals/add",
-      editUrl: "/gov/org/icDangerousChemicals/edit",
-      infoUrl: "/gov/org/icDangerousChemicals/detail",
-      delUrl: "/gov/org/icDangerousChemicals/del",
+      addUrl: "/gov/voice/article/addOrSaveDraft",
+      editUrl: "",
+      infoUrl: "/gov/voice/article/detailV2",
+      delUrl: "",
       editAuth(item) {
-        return item.agencyId == this.$store.state.user.agencyId;
+        return false;
       },
       delAuth(item) {
-        return item.agencyId == this.$store.state.user.agencyId;
+        return false;
       },
 
       editParams: [
         {
-          field: "企业名称",
+          field: "文章标题",
           keyName: "name",
           type: "input",
           maxlength: 50,
@@ -116,82 +161,105 @@ export default {
           rules: [
             {
               required: true,
-              message: "企业名称不能为空",
+              message: "文章标题不能为空",
               trigger: "blur",
             },
           ],
         },
         {
-          field: "企业分类",
+          field: "封面图片",
           keyName: "category",
-          type: "select",
-          optionUrl: "/gov/org/coverage/dict-select-list/dangerous_chemicals",
-          optionUrlParams: {
-            // dictType: "ic_service_type",
-          },
-          optionList: [],
+          type: "upload",
+          limit: 1,
           editDisabled: true,
-          rules: [
-            { required: true, message: "企业分类不能为空", trigger: "blur" },
-          ],
+          rules: [],
+          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: "safeDistance",
-          type: "number",
-          precision: 2,
-          step: 0.01,
-          min: 0,
-          max: 1000000000,
-          unitName: "公里",
         },
         {
-          field: "危化品种类",
-          keyName: "dangerType",
-          type: "select",
-          optionUrl: "/sys/dict/data/dictlist",
+          field: "发布范围",
+          keyName: "publishRangeIds",
+          type: "cascader",
+          optionUrl: "/gov/org/customeragency/agencygridtree",
           optionUrlParams: {
-            dictType: "ic_danger_type",
+            agencyId: this.$store.state.user.agencyId,
           },
           optionList: [],
-          editDisabled: true,
+          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"];
+            } else {
+              item["supValues"][0] = "";
+              item["supValues"][1] = "";
+            }
+          },
         },
         {
-          field: "负责人",
+          field: "发布时间",
           keyName: "principalName",
-          type: "input",
+          type: "date",
           maxlength: 50,
         },
         {
-          field: "联系电话",
-          keyName: "principalMobile",
-          type: "input",
-          maxlength: 50,
+          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: "address",
-          type: "address",
-          maxlength: 50,
-          supKeys: ["longitude", "latitude"],
-          supValues: ["", ""],
-          rules: [
-            {
-              required: true,
-              message: "经营地址坐标不能为空",
-              trigger: "blur",
+          field: "内容",
+          keyName: "content",
+          type: "rich-text",
         },
-          ],
+        {
+          field: "置顶",
+          keyName: "principalMobile",
+          type: "input",
+          maxlength: 50,
         },
-        { field: "备注", keyName: "remark", type: "textarea" },
       ],
-      editElseRules: {
-        longitude: {
-          type: "number",
-          required: true,
-          message: "请拖动地图选择坐标点",
-        },
-      },
+      editElseRules: {},
     };
   },
   components: { basePage },

src/views/modules/cpts/base/cpts/edit.vue

@@ -12,7 +12,8 @@
       >
         <div class="list">
           <el-form-item
-            v-for="item in editParams1"
+            v-for="item in editParams"
+            class="item"
             label-width="150px"
             style="display: block"
             :key="'edit' + item.keyName"
@@ -62,94 +63,8 @@
               </div>
             </template>
 
-            <template v-if="item.type == 'number'">
-              <el-input-number
-                v-model="fmData[item.keyName]"
-                class="item-number"
-                size="small"
-                clearable
-                :precision="item.precision || 0"
-                :step="item.step || 1"
-                :min="item.min || 0"
-                :max="item.max || 999999999999"
-                :placeholder="item.placeholder || '请输入'"
-              >
-              </el-input-number>
-              <span v-if="item.unitName">（{{ item.unitName }}）</span>
-            </template>
-
-            <template v-else-if="item.type == 'select'">
-              <el-select
-                v-model="fmData[item.keyName]"
-                :placeholder="item.placeholder || '请选择'"
-                size="small"
-                clearable
-                class="item-select"
-              >
-                <el-option
-                  v-for="subItem in item.optionList"
-                  :key="subItem.value"
-                  :label="subItem.label"
-                  :value="subItem.value"
-                >
-                </el-option>
-              </el-select>
-            </template>
-
-            <template v-else-if="item.type == 'address'">
-              <div class="address-item">
-                <el-input
-                  class="address-item-input"
-                  :placeholder="item.placeholder || '请输入所在地址'"
-                  v-model="fmData[item.keyName]"
-                  :maxlength="item.maxlength || ''"
-                  show-word-limit
-                >
-                </el-input>
-                <el-button
-                  style="margin-left: 10px"
-                  type="default"
-                  size="small"
-                  ref="mapSearch"
-                  @click="handleSearchMap(item)"
-                  >查询</el-button
-                >
-                <div id="app" class="div_map"></div>
-                <div style="margin-top: 10px" v-show="false">
-                  <span>经度</span>
-                  <el-input
-                    class="address-item-input2"
-                    maxlength="50"
-                    placeholder="请输入经度"
-                    v-model="fmData[item.supKeys[0]]"
-                  >
-                  </el-input>
-                  <span style="margin-left: 20px">纬度</span>
-                  <el-input
-                    class="address-item-input2"
-                    maxlength="50"
-                    placeholder="请输入纬度"
-                    v-model="fmData[item.supKeys[1]]"
-                  >
-                  </el-input>
-                </div>
-              </div>
-            </template>
-          </el-form-item>
-        </div>
-
-        <div class="list" v-if="editParams2.length > 0">
-          <el-form-item
-            v-for="item in editParams2"
-            label-width="150px"
-            style="display: block"
-            :key="'edit' + item.keyName"
-            :label="item.field"
-            :prop="item.keyName"
-            :rules="item.rules || []"
-          >
-            <template v-if="item.type == 'input'">
-              <el-input
+            <template v-if="item.type == 'date'">
+              <el-date-picker
                 v-if="
                   formType == 'add' || (formType == 'edit' && !item.editDisable)
                 "
@@ -158,32 +73,10 @@
                 size="small"
                 clearable
                 show-word-limit
-                :maxlength="item.maxlength || ''"
+                :format="item.format || 'yyyy-MM-dd'"
                 :placeholder="item.placeholder || '请输入'"
               >
-              </el-input>
-
-              <div class="item-show" v-else>
-                {{ fmData[item.keyName] || "--" }}
-              </div>
-            </template>
-
-            <template v-if="item.type == 'textarea'">
-              <el-input
-                v-if="
-                  formType == 'add' || (formType == 'edit' && !item.editDisable)
-                "
-                v-model="fmData[item.keyName]"
-                type="textarea"
-                class="item-input"
-                size="small"
-                clearable
-                show-word-limit
-                :rows="3"
-                :maxlength="item.maxlength || ''"
-                :placeholder="item.placeholder || '请输入'"
-              >
-              </el-input>
+              </el-date-picker>
 
               <div class="item-show" v-else>
                 {{ fmData[item.keyName] || "--" }}
@@ -224,6 +117,38 @@
               </el-select>
             </template>
 
+            <template v-else-if="item.type == 'cascader'">
+              <el-cascader
+                v-model="fmData[item.keyName]"
+                :placeholder="item.placeholder || '请选择'"
+                :options="item.optionList"
+                :props="item.optionProps || {}"
+                :show-all-levels="false"
+                size="small"
+                clearable
+                style="width: 240px"
+                @change="(e) => handleChangeCascader(e, item)"
+              >
+              </el-cascader>
+            </template>
+
+            <template v-else-if="item.type == 'upload'">
+              <el-upload
+                class="avatar-uploader"
+                :action="uploadUrl"
+                :data="{ customerId: customerId }"
+                :show-file-list="true"
+                :list-type="item.listType || 'picture'"
+                :limit="item.limit || 100"
+                :file-list="item.showList"
+                :on-success="(res, file) => handleImgSuccess(res, file, item)"
+                :on-remove="(res) => handleImgRemove(res, item)"
+                :before-upload="beforeImgUpload"
+              >
+                <a><i class="el-icon-plus avatar-uploader-icon"></i> 点击上传</a>
+              </el-upload>
+            </template>
+
             <template v-else-if="item.type == 'address'">
               <div class="address-item">
                 <el-input
@@ -238,6 +163,7 @@
                   style="margin-left: 10px"
                   type="default"
                   size="small"
+                  ref="mapSearch"
                   @click="handleSearchMap(item)"
                   >查询</el-button
                 >
@@ -373,6 +299,9 @@ export default {
 
       editParams1: [],
       editParams2: [],
+
+      uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+      customerId: localStorage.getItem("customerId"),
     };
   },
   components: {},
@@ -413,12 +342,13 @@ export default {
           });
         }
 
-        if (item.type == "select") {
+        if (item.type == "select" || item.type == "cascader") {
           if (item.optionUrl) {
             this.getFmOptions(
               index,
               item.optionUrl,
-              item.optionUrlParams || {}
+              item.optionUrlParams || {},
+              item.optionCook || null
             );
           }
         } else if (item.type == "address") {
@@ -440,18 +370,78 @@ export default {
       this.iniLoaded = true;
     },
 
-    async getFmOptions(index, url, params) {
+    async getFmOptions(index, url, params, cookFn) {
       const { data, code, msg } = await requestPost(url, {
         ...params,
       });
 
       if (code === 0) {
-        this.editParams[index].optionList = data || [];
+        this.editParams[index].optionList =
+          typeof cookFn == "function" ? cookFn(data) : data || [];
       } else {
         this.$message.error("请求检索基础数据失败！");
       }
     },
 
+    handleChangeCascader(vals, item) {
+      if (typeof item.handleChangeFn == "function") {
+        item.handleChangeFn(vals, item);
+      }
+    },
+
+    beforeImgUpload(file, item) {
+      if (typeof item.beforeImgUpload == "function") {
+        return item.beforeImgUpload(file, item, this);
+      }
+      return true;
+    },
+
+    handleImgRemove(file, item) {
+      console.log("handleImgRemove", file);
+      let url = file.url || file.response.data.url;
+      if (url) {
+        let { fmData } = this;
+        this.fmData[item.keyName] = fmData[item.keyName].filter(
+          (item) => item.url !== url
+        );
+        if (item.supKeys && Array.isArray(item.supKeys)) {
+          if (item.supKeys.length > 0) {
+            this.fmData[item.supKeys[0]] = fmData[item.keyName].map(
+              (item) => item.url
+            );
+          }
+          if (item.supKeys.length > 1) {
+            this.fmData[item.supKeys[1]] = item.supValues[0][0] || "";
+          }
+        }
+      }
+    },
+
+    handleImgSuccess(res, file, item) {
+      console.log("handleImgSuccess", res);
+      if (res.code === 0 && res.msg === "success") {
+        this.fmData[item.keyName].push({
+          url: res.data.url,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          format: file.name.split(".").pop(),
+        });
+        if (item.supKeys && Array.isArray(item.supKeys)) {
+          if (item.supKeys.length > 0) {
+            this.fmData[item.supKeys[0]] = fmData[item.keyName].map(
+              (item) => item.url
+            );
+          }
+          if (item.supKeys.length > 1) {
+            this.fmData[item.supKeys[1]] = item.supValues[0][0] || "";
+          }
+        }
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+
     // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
     initMap(item) {
       let { latitude, longitude } = this.$store.state.user;
@@ -663,7 +653,14 @@ export default {
   margin-top: 30px;
 
   &.z-div {
+    .list {
       display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        width: 50%;
+      }
+    }
 
     .item-input {
       width: 225px;

src/views/modules/cpts/base/index.vue

@@ -27,6 +27,7 @@
                   size="small"
                   clearable
                   style="width: 240px"
+                  :multiple="item.multiple || false"
                 >
                   <el-option
                     v-for="item in item.optionList"
@@ -37,6 +38,20 @@
                   </el-option>
                 </el-select>
               </template>
+              <template v-else-if="item.type == 'cascader'">
+                <el-cascader
+                  v-model="item.value"
+                  :placeholder="item.placeholder || '请选择'"
+                  :options="item.optionList"
+                  :props="item.optionProps"
+                  :show-all-levels="false"
+                  size="small"
+                  clearable
+                  style="width: 240px"
+                  @change="(e) => handleChangeCascader(e, item)"
+                >
+                </el-cascader>
+              </template>
               <template v-if="item.type == 'date-range'">
                 <el-date-picker
                   v-model="item.supValues[0]"
@@ -152,6 +167,20 @@
               :show-overflow-tooltip="true"
             >
             </el-table-column>
+
+            <el-table-column
+              v-else-if="item.type == 'array'"
+              :key="'table-array' + item.keyName"
+              :prop="item.keyName"
+              :label="item.field"
+              align="center"
+              :width="item.width || ''"
+              :show-overflow-tooltip="true"
+            >
+              <template slot-scope="scope">
+                {{ scope.row[item.keyName].join(item.arrayDiv || ",") }}
+              </template>
+            </el-table-column>
           </template>
 
           <el-table-column
@@ -403,30 +432,38 @@ export default {
     iniSearchData() {
       const { searchParams } = this;
       searchParams.forEach((item, index) => {
-        if (item.type == "select") {
+        if (item.type == "select" || item.type == "cascader") {
           if (item.optionUrl) {
             this.getFmOptions(
               index,
               item.optionUrl,
-              item.optionUrlParams || {}
+              item.optionUrlParams || {},
+              item.optionCook || null
             );
           }
         }
       });
     },
 
-    async getFmOptions(index, url, params) {
+    async getFmOptions(index, url, params, cookFn) {
       const { data, code, msg } = await requestPost(url, {
         ...params,
       });
 
       if (code === 0) {
-        this.searchParams[index].optionList = data || [];
+        this.searchParams[index].optionList =
+          typeof cookFn == "function" ? cookFn(data) : data || [];
       } else {
         this.$message.error("请求检索基础数据失败！");
       }
     },
 
+    handleChangeCascader(vals, item) {
+      if (typeof item.handleChangeFn == "function") {
+        item.handleChangeFn(vals, item);
+      }
+    },
+
     handleSearch(val) {
       this.pageNo = 1;