From be64204ad41324f5c9d81c5629a359886cd5c242 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Tue, 20 Sep 2022 10:38:54 +0800
Subject: [PATCH] 11

---
 src/views/modules/cpts/base/cpts/detail.vue | 976 ++++++++++++++++++++
 src/views/modules/cpts/base/index.vue       | 467 ++++------
 2 files changed, 1181 insertions(+), 262 deletions(-)
 create mode 100644 src/views/modules/cpts/base/cpts/detail.vue

diff --git a/src/views/modules/cpts/base/cpts/detail.vue b/src/views/modules/cpts/base/cpts/detail.vue
new file mode 100644
index 000000000..436a923bd
--- /dev/null
+++ b/src/views/modules/cpts/base/cpts/detail.vue
@@ -0,0 +1,976 @@
+<template>
+  <div>
+    <div class="dialog-h-content scroll-h">
+      <el-form
+        v-if="iniLoaded"
+        ref="ref_form"
+        :model="fmData"
+        :inline="true"
+        :disabled="formType === 'watch'"
+        class="m-fm"
+        :class="editParamsDiv ? 'z-div' : ''"
+      >
+        <div class="list">
+          <el-form-item
+            v-for="item in editParams"
+            class="item"
+            label-width="140px"
+            style="display: block"
+            :key="'edit' + item.keyName"
+            :label="item.field"
+            :prop="item.keyName"
+            :rules="item.rules || []"
+          >
+            <template v-if="item.type == 'switch'">
+              <el-switch
+                v-model="fmData[item.keyName]"
+                size="small"
+                :active-text="item.activeText || ''"
+                :inactive-text="item.inactiveText || ''"
+                :active-value="item.activeValue || true"
+                :inactive-value="item.inactiveValue || false"
+              >
+              </el-switch>
+            </template>
+
+            <template v-if="item.type == 'input'">
+              <el-input
+                v-if="
+                  formType == 'add' || (formType == 'edit' && !item.editDisable)
+                "
+                v-model="fmData[item.keyName]"
+                class="item-input"
+                size="small"
+                clearable
+                show-word-limit
+                :maxlength="item.maxlength || ''"
+                :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>
+
+              <div class="item-show" v-else>
+                {{ fmData[item.keyName] || "--" }}
+              </div>
+            </template>
+
+            <template v-if="item.type == 'date'">
+              <el-date-picker
+                v-if="
+                  formType == 'add' || (formType == 'edit' && !item.editDisable)
+                "
+                v-model="fmData[item.keyName]"
+                :picker-options="item.pickerOptions"
+                class="item-input"
+                size="small"
+                clearable
+                show-word-limit
+                :value-format="item.format || 'yyyy-MM-dd'"
+                :placeholder="item.placeholder || '请输入'"
+              >
+              </el-date-picker>
+
+              <div class="item-show" v-else>
+                {{ fmData[item.keyName] || "--" }}
+              </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"
+                :multiple="item.multiple || false"
+                :filterable="item.filterable || false"
+                :allowCreate="item.allowCreate || false"
+                :collapse-tags="item.collapseTags || false"
+                default-first-option
+                @change="(e) => handleChangeSelect(e, item)"
+              >
+                <template v-if="item.optionType == 'group'">
+                  <el-option-group
+                    v-for="group in item.optionList"
+                    :key="group.label"
+                    :label="group.label"
+                  >
+                    <el-option
+                      v-for="subItem in group.optionList"
+                      :key="subItem.value"
+                      :label="subItem.label"
+                      :value="subItem.value"
+                    >
+                    </el-option>
+                  </el-option-group>
+                </template>
+                <template v-else>
+                  <el-option
+                    v-for="(subItem, subIndex) in item.optionList"
+                    :key="subItem.value + subIndex"
+                    :label="subItem.label"
+                    :value="subItem.value"
+                  >
+                  </el-option>
+                </template>
+              </el-select>
+            </template>
+
+            <template v-else-if="item.type == 'rich-text'">
+              <div
+                v-if="
+                  formType == 'add' || (formType == 'edit' && !item.editDisable)
+                "
+                class="item-rich-text"
+              >
+                <Tinymce
+                  :ref="'richText' + item.keyName"
+                  v-model="fmData[item.keyName]"
+                  :customerId="customerId"
+                  :placeholder="item.placeholder || '请输入'"
+                  :height="500"
+                />
+              </div>
+              <div
+                v-else
+                class="item-rich-text z-show"
+                @click="handleClickHtmlNode"
+              >
+                <div v-html="fmData[item.keyName]"></div>
+              </div>
+            </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"
+                :collapse-tags="item.collapseTags || false"
+                size="small"
+                clearable
+                class="item-select"
+                @change="(e) => handleChangeCascader(e, item)"
+              >
+              </el-cascader>
+            </template>
+
+            <template v-else-if="item.type == 'upload'">
+              <el-upload
+                v-if="
+                  formType == 'add' || (formType == 'edit' && !item.editDisable)
+                "
+                ref="upload"
+                class="avatar-uploader"
+                :class="{ 'z-full': fmData[item.keyName].length >= item.limit }"
+                :action="item.uploadUrl || uploadUrl"
+                :data="{ customerId: customerId }"
+                :show-file-list="true"
+                :list-type="item.listType || 'picture'"
+                :limit="item.limit || 100"
+                :file-list="fmData[item.keyName]"
+                :on-success="(res, file) => handleImgSuccess(res, file, item)"
+                :on-error="(res, file) => handleImgError(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"></i> 点击上传</a>
+              </el-upload>
+              <el-image
+                v-else-if="fmData[item.keyName].length > 0"
+                style="width: 100px; height: 100px"
+                :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'">
+              <div class="address-item">
+                <el-input
+                  class="address-item-input"
+                  :placeholder="item.placeholder || '请输入所在地址'"
+                  v-model="fmData[item.keyName]"
+                  :maxlength="item.maxlength || ''"
+                  show-word-limit
+                  size="small"
+                >
+                </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>
+      </el-form>
+
+      <div class="div_btn resi-btns" v-if="!formBtnFixed">
+        <el-button size="small" @click="handleCancle">{{
+          editConfig.cancelBtnName || "取消"
+        }}</el-button>
+        <el-button
+          v-if="formType != 'watch'"
+          type="primary"
+          size="small"
+          :disabled="btnDisable"
+          @click="handleComfirm"
+          >{{ editConfig.confirmBtnName || "确定" }}</el-button
+        >
+        <slot
+          name="operateSup"
+          v-bind:id="formId"
+          v-bind:info="fmData"
+          v-bind:formType="formType"
+        ></slot>
+      </div>
+
+      <slot
+        name="bottomSup"
+        v-bind:id="formId"
+        v-bind:info="fmData"
+        v-bind:formType="formType"
+      ></slot>
+    </div>
+
+    <div class="div_btn resi-btns" v-if="formBtnFixed">
+      <el-button size="small" @click="handleCancle">{{
+        editConfig.cancelBtnName || "取消"
+      }}</el-button>
+      <el-button
+        v-if="formType != 'watch'"
+        type="primary"
+        size="small"
+        :disabled="btnDisable"
+        @click="handleComfirm"
+        >{{ editConfig.confirmBtnName || "确定" }}</el-button
+      >
+      <slot
+        name="operateSup"
+        v-bind:id="formId"
+        v-bind:info="fmData"
+        v-bind:formType="formType"
+      ></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import nextTick from "dai-js/tools/nextTick";
+import Schema from "async-validator";
+import Tinymce from "@c/tinymce2/index.vue";
+
+var map;
+var search;
+var markers;
+var infoWindowList;
+var geocoder; // 新建一个正逆地址解析类
+
+export default {
+  components: { Tinymce },
+
+  props: {
+    formId: {
+      type: String,
+      default: "",
+    },
+    formType: {
+      type: String,
+      default: "info",
+    },
+    formBtnFixed: {
+      type: Boolean,
+      default: true,
+    },
+    idName: {
+      type: String,
+      default: "",
+    },
+    addUrl: {
+      type: String,
+      default: "",
+    },
+    editUrl: {
+      type: String,
+      default: "",
+    },
+    delUrl: {
+      type: String,
+      default: "",
+    },
+    infoUrl: {
+      type: String,
+      default: "",
+    },
+
+    editParams: {
+      type: Array,
+      default: () => [],
+    },
+    editFixedParams: {
+      type: Object,
+      default: () => ({}),
+    },
+    editParamsDiv: {
+      type: Number,
+      default: 0,
+    },
+    editElseRules: {
+      type: Object,
+      default: () => ({}),
+    },
+    editConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      iniLoaded: false,
+
+      btnDisable: false,
+
+      fmData: {},
+
+      editParams1: [],
+      editParams2: [],
+
+      uploadUrl: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
+      customerId: localStorage.getItem("customerId"),
+    };
+  },
+  computed: {},
+  watch: {
+    editParams: {
+      handler() {
+        this.computeFmData();
+      },
+      deep: true,
+    },
+  },
+
+  async mounted() {
+    this.initForm();
+  },
+
+  methods: {
+    async initForm() {
+      this.iniFmData();
+
+      if (this.formId && this.formType != "add") {
+        this.getInfo();
+      }
+    },
+
+    computeFmData() {
+      console.log(this.fmData);
+    },
+
+    iniFmData() {
+      const { editParams, fmData, editParamsDiv } = this;
+      editParams.forEach((item, index) => {
+        if (typeof item.value == "function") {
+          fmData[item.keyName] = item.value();
+        } else if (
+          typeof item.value == "string" ||
+          typeof item.value == "number" ||
+          typeof item.value == "boolean"
+        ) {
+          fmData[item.keyName] = item.value;
+        } else if (typeof item.value == "undefined") {
+          fmData[item.keyName] = "";
+        } else {
+          fmData[item.keyName] = item.value || "";
+          console.error(
+            "不应该直接传入数组或对象的值，这样会导致传入的值被子组件修改。editParams-------------cpts/base/cpts/edit.vue",
+            item
+          );
+        }
+
+        if (item.supValues) {
+          item.supValues.forEach((value, index) => {
+            if (typeof value == "function") {
+              fmData[item.supKeys[index]] = value();
+            } else if (
+              typeof value == "string" ||
+              typeof value == "number" ||
+              typeof value == "boolean"
+            ) {
+              fmData[item.supKeys[index]] = value;
+            } else if (typeof value == "undefined") {
+              fmData[item.supKeys[index]] = "";
+            } else {
+              fmData[item.supKeys[index]] = value;
+              console.error(
+                "不应该直接传入数组或对象的值，这样会导致传入的值被子组件修改。editParams-------------cpts/base/cpts/edit.vue",
+                item
+              );
+            }
+          });
+        }
+
+        if (item.type == "select" || item.type == "cascader") {
+          if (item.optionUrl) {
+            this.getFmOptions(
+              index,
+              item.optionUrl,
+              item.optionUrlParams || {},
+              item.optionCook || null
+            );
+          }
+        } else if (item.type == "address") {
+          this.$nextTick(async () => {
+            await nextTick(300);
+            this.initMap(item);
+          });
+        }
+      });
+
+      this.fmData = { ...fmData };
+      if (editParamsDiv) {
+        this.editParams1 = editParams.slice(0, editParamsDiv);
+        this.editParams2 = editParams.slice(editParamsDiv);
+      } else {
+        this.editParams1 = editParams;
+      }
+      console.log("------------------------------------", this.fmData);
+      this.iniLoaded = true;
+    },
+
+    handleClickHtmlNode(e) {
+      //在判断事件目标节点的时候，考虑到兼容性应该统一转换成大写或小写进行判断
+      if (e.target.localName.toLowerCase() === "a") {
+        // 通过判端目标节点以后，就能在这里对其进行操作啦。
+        let url = e.target.getAttribute("src"); //获取a标签属性，我这里自定义了一个属性data-id并将id赋值给了该属性，如何需要获取click方法的参数，需要获取a标签的click属性，并手动解析获取里面的参数
+        window.open(url);
+      }
+    },
+
+    async getFmOptions(index, url, params, cookFn) {
+      const { data, code, msg } = await requestPost(url, {
+        ...params,
+      });
+
+      if (code === 0) {
+        this.editParams[index].optionList =
+          typeof cookFn == "function" ? cookFn(data) : data || [];
+      } else {
+        this.$message.error("请求检索基础数据失败！");
+      }
+    },
+
+    handleChangeCascader(vals, item) {
+      this.fmData[item["keyName"]] = vals;
+      if (typeof item.handleChangeFn == "function") {
+        item.handleChangeFn(vals, item, this);
+      }
+    },
+    handleChangeSelect(vals, item) {
+      console.log(vals, item);
+      this.fmData[item["keyName"]] = vals;
+      if (typeof item.handleChangeFn == "function") {
+        item.handleChangeFn(vals, item, this);
+      }
+    },
+
+    beforeImgUpload(file, item) {
+      if (typeof item.beforeImgUpload == "function") {
+        if (!item.beforeImgUpload(file, item, this)) return false;
+      }
+      return true;
+    },
+
+    handleImgRemove(file, item) {
+      console.log("handleImgRemove", file);
+      let url = file.response ? file.response.data.url : file.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]] =
+              this.fmData[item.supKeys[0]][0] || "";
+          }
+        }
+      }
+    },
+
+    handleImgExceed(res, item) {
+      console.log(res);
+      // 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 = 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 {
+          this.fmData[item.keyName] = [picItem];
+        }
+        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]] =
+              this.fmData[item.supKeys[0]][0] || "";
+          }
+        }
+      } else {
+        this.$message.error(res.msg);
+      }
+    },
+
+    handleImgError(res, file, item) {
+      console.log(res);
+    },
+
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap(item) {
+      let { latitude, longitude } = this.$store.state.user;
+      if (!latitude || latitude == "" || latitude == "0") {
+        latitude = 39.9088810666821;
+        longitude = 116.39743841556731;
+      }
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(latitude, longitude);
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById("app"), {
+        center: center, // 设置地图中心点坐标
+        zoom: 13, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45, // 设置地图旋转角度
+      });
+
+      search = new window.TMap.service.Search({ pageSize: 10 });
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: [],
+      });
+      infoWindowList = Array(10);
+
+      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+
+      // 监听地图平移结束
+      map.on("panend", (e) => {
+        this.handleMoveCenter(item, e);
+      });
+      // this.handleMoveCenter(item);
+    },
+
+    setMarker(lat, lng) {
+      markers.setGeometries([]);
+      markers.add([
+        {
+          id: "4",
+          styleId: "marker",
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: "marker4",
+          },
+        },
+      ]);
+    },
+
+    handleSearchMap(item) {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close();
+      });
+      infoWindowList.length = 0;
+      markers.setGeometries([]);
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.fmData[item.keyName],
+          bounds: map.getBounds(),
+        })
+        .then((result) => {
+          let { data } = result;
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng },
+            } = data[0];
+            map.setCenter(new TMap.LatLng(lat, lng));
+            this.setMarker(lat, lng);
+            // item.supValues[0] = lng;
+            // item.supValues[1] = lat;
+            this.fmData[item.supKeys[0]] = lng;
+            this.fmData[item.supKeys[1]] = lat;
+          } else {
+            this.$message.error("未检索到相关位置坐标");
+          }
+        });
+    },
+
+    handleMoveCenter(item, e) {
+      console.log(e);
+      //修改地图中心点
+      const center = map.getCenter();
+      const lat = center.getLat();
+      const lng = center.getLng();
+      // item.supValues[0] = lng;
+      // item.supValues[1] = lat;
+      this.fmData[item.supKeys[0]] = lng;
+      this.fmData[item.supKeys[1]] = lat;
+      this.setMarker(lat, lng);
+
+      if (e && e.originalEvent) {
+        geocoder
+          .getAddress({ location: new TMap.LatLng(lat, lng) }) // 将给定的坐标位置转换为地址
+          .then((result) => {
+            this.fmData[item.keyName] = result.result.address;
+          });
+      }
+    },
+
+    async getInfo() {
+      let url = this.infoUrl;
+      if (!url) return;
+      const { idName, formId } = this;
+
+      if (url.endsWith("/")) {
+        url += formId;
+      }
+
+      const params = {
+        [idName]: formId,
+      };
+
+      let { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        const { editConfig } = this;
+        console.log("xxxxxxxxxxxxxxxxxxxxxx", editConfig);
+        if (editConfig && typeof editConfig.cookInfoFn == "function") {
+          data = editConfig.cookInfoFn(data);
+        }
+        this.fmData = {
+          ...this.fmData,
+          ...data,
+        };
+
+        await nextTick(600);
+        if (map) {
+          if (data.latitude) {
+            map.setCenter(new TMap.LatLng(data.latitude, data.longitude));
+          } else {
+            if (this.formType == "edit" && this.$refs && this.$refs.mapSearch) {
+              this.$refs.mapSearch[0].handleClick();
+            }
+          }
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    watchImg(src) {
+      window.open(src);
+    },
+
+    // 过滤文本
+    dormatHtml(content) {
+      if (
+        content.startsWith(
+          "<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n"
+        ) &&
+        content.endsWith("\n</body>\n</html>")
+      ) {
+        content = content.slice(45, -16);
+      }
+      return content;
+    },
+
+    cookBeforeSubmit(data) {
+      Object.keys(data).forEach((k) => {
+        if (typeof data[k] == "string") {
+          data[k] = this.dormatHtml(data[k]);
+        }
+      });
+      return data;
+    },
+
+    async handleComfirm() {
+      this.btnDisable = true;
+      setTimeout(() => {
+        this.btnDisable = false;
+      }, 5000);
+
+      console.log(this.$refs["ref_form"]);
+
+      this.$refs["ref_form"].validate((valid, messageObj) => {
+        console.log(valid, messageObj);
+        if (!valid) {
+          app.util.validateRule(messageObj);
+          this.btnDisable = false;
+        } else {
+          if (this.editElseRules) {
+            const validator = new Schema(this.editElseRules);
+            validator
+              .validate(this.fmData)
+              .then(() => {
+                this.submit();
+              })
+              .catch(({ err, fields }) => {
+                console.log("--------------", err, fields);
+                app.util.validateRule(fields);
+              });
+          } else {
+            this.submit();
+          }
+        }
+      });
+    },
+
+    async submit() {
+      const { editConfig, fmData, formType, editFixedParams } = this;
+      if (
+        typeof editConfig.beforeSubmit == "function" &&
+        !editConfig.beforeSubmit(formType, fmData, this)
+      ) {
+        return;
+      }
+
+      let url = "";
+      let params = {
+        ...fmData,
+        ...editFixedParams,
+        // serviceType: this.fmData.serviceTypeArr.join(","),
+      };
+
+      params = this.cookBeforeSubmit(params);
+
+      if (this.formType === "add") {
+        url = this.addUrl;
+      } else {
+        url = this.editUrl;
+      }
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "操作成功",
+        });
+        this.handleCancle();
+        this.$emit("afterEdit");
+        this.btnDisable = false;
+      } else {
+        this.btnDisable = false;
+        this.$message.error(msg);
+      }
+    },
+
+    handleCancle() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.m-fm {
+  margin-top: 30px;
+
+  &.z-div {
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+
+      .item {
+        min-width: 45%;
+
+        .item-rich-text {
+          width: 817px;
+          max-height: 500px;
+          overflow: auto;
+
+          img {
+            max-width: 100%;
+          }
+          &.z-show {
+            box-sizing: border-box;
+            padding: 15px;
+            border: 1px solid #eee;
+            height: auto;
+          }
+        }
+      }
+    }
+
+    .item-show {
+      width: 324px;
+    }
+
+    .item-input {
+      width: 324px;
+    }
+    .item-select {
+      width: 324px;
+    }
+    .item-number {
+      width: 180px;
+    }
+
+    .address-item {
+      width: 350px;
+
+      .address-item-input {
+        width: 74%;
+      }
+      .address-item-input2 {
+        margin-left: 5px;
+        width: 40%;
+      }
+    }
+  }
+  .avatar-uploader {
+    &.z-full {
+      /deep/ .el-upload.el-upload--picture-card {
+        display: none !important;
+      }
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #65a5f9;
+      i {
+        margin-right: 4px;
+        color: #65a5f9;
+        font-size: 18px;
+      }
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+  .item-rich-text {
+    width: 600px;
+    height: 500px;
+    img {
+      max-width: 100%;
+    }
+    .item-show {
+      width: 100%;
+    }
+  }
+
+  .item-select,
+  .item-show,
+  .item-input {
+    width: 450px;
+  }
+  .item-number {
+    width: 225px;
+  }
+
+  .address-item {
+    width: 450px;
+
+    .address-item-input {
+      width: 85%;
+    }
+    .address-item-input2 {
+      margin-left: 5px;
+      width: 40%;
+    }
+  }
+  .div_map {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/modules/cpts/base/index.vue b/src/views/modules/cpts/base/index.vue
index d6660da39..ec3fabc42 100644
--- a/src/views/modules/cpts/base/index.vue
+++ b/src/views/modules/cpts/base/index.vue
@@ -1,293 +1,236 @@
 <template>
   <div class="div_main">
     <div v-show="true">
-      <div class="div_search" ref="ref_search">
-        <el-form :inline="true" ref="ref_searchform" label-width="100px">
+      <div class="div_search"
+           ref="ref_search">
+        <el-form :inline="true"
+                 ref="ref_searchform"
+                 label-width="100px">
           <div>
-            <el-form-item
-              v-for="item in searchParams"
-              :key="'serach' + item.keyName"
-              :label="item.field"
-              :prop="item.keyName"
-            >
+            <el-form-item v-for="item in searchParams"
+                          :key="'serach' + item.keyName"
+                          :label="item.field"
+                          :prop="item.keyName">
               <template v-if="item.type == 'input'">
-                <el-input
-                  v-model="item.value"
-                  style="width: 240px"
-                  size="small"
-                  clearable
-                  :placeholder="item.placeholder || '请输入'"
-                >
+                <el-input v-model="item.value"
+                          style="width: 240px"
+                          size="small"
+                          clearable
+                          :placeholder="item.placeholder || '请输入'">
                 </el-input>
               </template>
               <template v-else-if="item.type == 'select'">
-                <el-select
-                  v-model="item.value"
-                  :placeholder="item.placeholder || '请选择'"
-                  size="small"
-                  clearable
-                  style="width: 240px"
-                  :multiple="item.multiple || false"
-                >
-                  <el-option
-                    v-for="item in item.optionList"
-                    :key="'serach' + item.keyName + item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
+                <el-select v-model="item.value"
+                           :placeholder="item.placeholder || '请选择'"
+                           size="small"
+                           clearable
+                           style="width: 240px"
+                           :multiple="item.multiple || false">
+                  <el-option v-for="item in item.optionList"
+                             :key="'serach' + item.keyName + item.value"
+                             :label="item.label"
+                             :value="item.value">
                   </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 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]"
-                  type="date"
-                  placeholder="开始时间"
-                  style="width: 150px"
-                  value-format="yyyy-MM-dd"
-                  clearable
-                >
+                <el-date-picker v-model="item.supValues[0]"
+                                type="date"
+                                placeholder="开始时间"
+                                style="width: 150px"
+                                value-format="yyyy-MM-dd"
+                                clearable>
                 </el-date-picker>
                 <span style="display: inline-block; margin: 0 10px">至</span>
-                <el-date-picker
-                  v-model="item.supValues[1]"
-                  type="date"
-                  placeholder="结束时间"
-                  style="width: 150px"
-                  value-format="yyyy-MM-dd"
-                  clearable
-                >
+                <el-date-picker v-model="item.supValues[1]"
+                                type="date"
+                                placeholder="结束时间"
+                                style="width: 150px"
+                                value-format="yyyy-MM-dd"
+                                clearable>
                 </el-date-picker>
               </template>
             </el-form-item>
 
-            <el-button
-              style="margin-left: 30px; margin-bottom: 20px"
-              size="small"
-              class="diy-button--search"
-              @click="handleSearch"
-              >查询</el-button
-            >
-            <el-button
-              style="margin-left: 10px; margin-bottom: 20px"
-              size="small"
-              class="diy-button--reset"
-              @click="resetSearch"
-              >重置</el-button
-            >
+            <el-button style="margin-left: 30px; margin-bottom: 20px"
+                       size="small"
+                       class="diy-button--search"
+                       @click="handleSearch">查询</el-button>
+            <el-button style="margin-left: 10px; margin-bottom: 20px"
+                       size="small"
+                       class="diy-button--reset"
+                       @click="resetSearch">重置</el-button>
           </div>
         </el-form>
       </div>
 
-      <div class="div_table" :style="{ height: maxTableHeight + 130 + 'px' }">
+      <div class="div_table"
+           :style="{ height: maxTableHeight + 130 + 'px' }">
         <div class="div_btn">
-          <el-button
-            class="diy-button--add"
-            v-if="addUrl"
-            size="small"
-            @click="handleAdd"
-            >新增</el-button
-          >
-
-          <el-button
-            v-if="mubanUrl"
-            class="btn_upload diy-button--export"
-            size="small"
-            @click="handleExportModule('room')"
-            >下载模板</el-button
-          >
-
-          <el-upload
-            v-if="importUrl"
-            ref="upload"
-            class="upload-btn"
-            action="uploadUlr"
-            :limit="1"
-            :accept="'.xls,.xlsx'"
-            :with-credentials="true"
-            :show-file-list="false"
-            :auto-upload="true"
-            :before-upload="beforeExcelUpload"
-            :http-request="uploadHttpRequest"
-          >
-            <el-button size="small" class="btn_upload diy-button--delete"
-              >导入</el-button
-            >
+          <el-button class="diy-button--add"
+                     v-if="addUrl"
+                     size="small"
+                     @click="handleAdd">新增</el-button>
+
+          <el-button v-if="mubanUrl"
+                     class="btn_upload diy-button--export"
+                     size="small"
+                     @click="handleExportModule('room')">下载模板</el-button>
+
+          <el-upload v-if="importUrl"
+                     ref="upload"
+                     class="upload-btn"
+                     action="uploadUlr"
+                     :limit="1"
+                     :accept="'.xls,.xlsx'"
+                     :with-credentials="true"
+                     :show-file-list="false"
+                     :auto-upload="true"
+                     :before-upload="beforeExcelUpload"
+                     :http-request="uploadHttpRequest">
+            <el-button size="small"
+                       class="btn_upload diy-button--delete">导入</el-button>
           </el-upload>
 
-          <el-button
-            v-if="exportUrl"
-            @click="handleExport"
-            class="btn_upload diy-button--reset"
-            size="small"
-            >导出</el-button
-          >
+          <el-button v-if="exportUrl"
+                     @click="handleExport"
+                     class="btn_upload diy-button--reset"
+                     size="small">导出</el-button>
         </div>
 
-        <el-table
-          ref="ref_table"
-          :data="tableData"
-          border
-          :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
-          class="table"
-          style="width: 100%"
-          :height="maxTableHeight"
-        >
-          <template v-for="item in tableParams" :prop="item.keyName">
-            <el-table-column
-              v-if="item.type == 'no'"
-              :key="'table-no' + item.keyName"
-              :label="item.field"
-              fixed="left"
-              type="index"
-              align="center"
-              width="50"
-            />
-
-            <el-table-column
-              v-else-if="item.type == 'text'"
-              :key="'table' + item.keyName"
-              :prop="item.keyName"
-              :label="item.field"
-              align="center"
-              :width="item.width || ''"
-              :show-overflow-tooltip="true"
-            >
+        <el-table ref="ref_table"
+                  :data="tableData"
+                  border
+                  :header-cell-style="{ background: '#2195FE', color: '#FFFFFF' }"
+                  class="table"
+                  style="width: 100%"
+                  :height="maxTableHeight">
+          <template v-for="item in tableParams"
+                    :prop="item.keyName">
+            <el-table-column v-if="item.type == 'no'"
+                             :key="'table-no' + item.keyName"
+                             :label="item.field"
+                             fixed="left"
+                             type="index"
+                             align="center"
+                             width="50" />
+
+            <el-table-column v-else-if="item.type == 'text'"
+                             :key="'table' + item.keyName"
+                             :prop="item.keyName"
+                             :label="item.field"
+                             align="center"
+                             :width="item.width || ''"
+                             :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"
-            >
+            <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
-            fixed="right"
-            label="操作"
-            align="center"
-            width="200"
-          >
+          <el-table-column fixed="right"
+                           label="操作"
+                           align="center"
+                           width="200">
             <template slot-scope="scope">
-              <el-button
-                v-if="infoUrl && infoAuth(scope.row)"
-                @click="handleWatch(scope.row)"
-                type="text"
-                size="small"
-                class=".div-table-button--detail"
-                >查看</el-button
-              >
-              <el-button
-                v-if="editUrl && editAuth(scope.row)"
-                @click="handleEdit(scope.row)"
-                type="text"
-                size="small"
-                class="div-table-button--edit"
-                >{{ editBtnName(scope.row) }}</el-button
-              >
-              <el-popconfirm
-                v-if="delUrl && delAuth(scope.row)"
-                title="删除之后无法回复，确认删除？"
-                @onConfirm="handleDelete(scope.row, scope.$index)"
-                @confirm="handleDelete(scope.row, scope.$index)"
-              >
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="small"
-                  style="margin-left: 10px"
-                  class="div-table-button--delete"
-                  >删除</el-button
-                >
+              <el-button v-if="infoUrl && infoAuth(scope.row)"
+                         @click="handleWatch(scope.row)"
+                         type="text"
+                         size="small"
+                         class=".div-table-button--detail">查看</el-button>
+              <el-button v-if="editUrl && editAuth(scope.row)"
+                         @click="handleEdit(scope.row)"
+                         type="text"
+                         size="small"
+                         class="div-table-button--edit">{{ editBtnName(scope.row) }}</el-button>
+              <el-popconfirm v-if="delUrl && delAuth(scope.row)"
+                             title="删除之后无法回复，确认删除？"
+                             @onConfirm="handleDelete(scope.row, scope.$index)"
+                             @confirm="handleDelete(scope.row, scope.$index)">
+                <el-button slot="reference"
+                           type="text"
+                           size="small"
+                           style="margin-left: 10px"
+                           class="div-table-button--delete">删除</el-button>
               </el-popconfirm>
 
-              <slot name="listBtnSup" v-bind:item="scope.row"></slot>
+              <slot name="listBtnSup"
+                    v-bind:item="scope.row"></slot>
             </template>
           </el-table-column>
         </el-table>
 
         <div>
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page.sync="pageNo"
-            :page-sizes="[20, 50, 100, 200]"
-            :page-size="parseInt(pageSize)"
-            layout="sizes, prev, pager, next, total"
-            :total="total"
-          >
+          <el-pagination @size-change="handleSizeChange"
+                         @current-change="handleCurrentChange"
+                         :current-page.sync="pageNo"
+                         :page-sizes="[20, 50, 100, 200]"
+                         :page-size="parseInt(pageSize)"
+                         layout="sizes, prev, pager, next, total"
+                         :total="total">
           </el-pagination>
         </div>
       </div>
     </div>
 
     <!-- 修改弹出框 -->
-    <el-dialog
-      v-if="formShow"
-      :visible.sync="formShow"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :title="formTitle"
-      :width="editParamsDiv ? '1100px' : '850px'"
-      top="5vh"
-      class="dialog-h"
-      @closed="handleClose"
-    >
-      <edit-form
-        v-if="formShow"
-        ref="editForm"
-        :idName="idName"
-        :formId="formId"
-        :formType="formType"
-        :infoUrl="infoUrl"
-        :addUrl="addUrl"
-        :editUrl="editUrl"
-        :editParams="editParams"
-        :editParamsDiv="editParamsDiv"
-        :editElseRules="editElseRules"
-        :editFixedParams="editFixedParams"
-        :formBtnFixed="formBtnFixed"
-        :editConfig="editConfig"
-        @close="handleClose"
-        @afterEdit="handleEditSuccess"
-      >
+    <el-dialog v-if="formShow"
+               :visible.sync="formShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="formTitle"
+               :width="editParamsDiv ? '1100px' : '850px'"
+               top="5vh"
+               class="dialog-h"
+               @closed="handleClose">
+      <edit-form v-if="formShow"
+                 ref="editForm"
+                 :idName="idName"
+                 :formId="formId"
+                 :formType="formType"
+                 :infoUrl="infoUrl"
+                 :addUrl="addUrl"
+                 :editUrl="editUrl"
+                 :editParams="editParams"
+                 :editParamsDiv="editParamsDiv"
+                 :editElseRules="editElseRules"
+                 :editFixedParams="editFixedParams"
+                 :formBtnFixed="formBtnFixed"
+                 :editConfig="editConfig"
+                 @close="handleClose"
+                 @afterEdit="handleEditSuccess">
         <template v-slot:bottomSup="{ id, formType, info }">
-          <slot
-            name="editBottomSup"
-            v-bind:id="id"
-            v-bind:formType="formType"
-            v-bind:info="info"
-          ></slot>
+          <slot name="editBottomSup"
+                v-bind:id="id"
+                v-bind:formType="formType"
+                v-bind:info="info"></slot>
         </template>
         <template v-slot:operateSup="{ id, formType, info }">
-          <slot
-            name="editOperateSup"
-            v-bind:id="id"
-            v-bind:formType="formType"
-            v-bind:info="info"
-          ></slot>
+          <slot name="editOperateSup"
+                v-bind:id="id"
+                v-bind:formType="formType"
+                v-bind:info="info"></slot>
         </template>
       </edit-form>
     </el-dialog>
@@ -402,7 +345,7 @@ export default {
     },
   },
 
-  data() {
+  data () {
     return {
       tableData: [],
 
@@ -420,7 +363,7 @@ export default {
   },
 
   computed: {
-    maxTableHeight() {
+    maxTableHeight () {
       const { ref_search_height } = this;
       return this.$store.state.inIframe
         ? this.clientHeight - ref_search_height - 265 + this.iframeHeight
@@ -431,7 +374,7 @@ export default {
 
   watch: {},
 
-  async mounted() {
+  async mounted () {
     console.log(this.$store.state);
     this.user = this.$store.state.user;
 
@@ -445,19 +388,19 @@ export default {
     this.computeSearchHeight();
   },
 
-  activated() {
+  activated () {
     console.log("-------------activated");
     this.$refs["ref_table"].doLayout();
   },
 
   methods: {
-    computeSearchHeight() {
+    computeSearchHeight () {
       this.ref_search_height = this.$refs["ref_search"].clientHeight;
       console.log(this.$refs["ref_search"]);
       console.log(this.ref_search_height);
     },
 
-    iniSearchData() {
+    iniSearchData () {
       const { searchParams } = this;
       searchParams.forEach((item, index) => {
         if (item.type == "select" || item.type == "cascader") {
@@ -473,7 +416,7 @@ export default {
       });
     },
 
-    async getFmOptions(index, url, params, cookFn) {
+    async getFmOptions (index, url, params, cookFn) {
       const { data, code, msg } = await requestPost(url, {
         ...params,
       });
@@ -486,19 +429,19 @@ export default {
       }
     },
 
-    handleChangeCascader(vals, item) {
+    handleChangeCascader (vals, item) {
       if (typeof item.handleChangeFn == "function") {
         item.handleChangeFn(vals, item);
       }
     },
 
-    handleSearch(val) {
+    handleSearch (val) {
       this.pageNo = 1;
 
       this.getTableData();
     },
 
-    beforeExcelUpload(file) {
+    beforeExcelUpload (file) {
       console.log("file", file);
       const isType = file.type === "application/vnd.ms-excel";
       const isTypeComputer =
@@ -516,7 +459,7 @@ export default {
       return fileType && isLt1M;
     },
 
-    async uploadHttpRequest(file) {
+    async uploadHttpRequest (file) {
       let { importUrl: url } = this;
       if (!url) return;
 
@@ -545,7 +488,7 @@ export default {
         });
     },
 
-    async handleExportModule() {
+    async handleExportModule () {
       let { mubanUrl: url } = this;
       if (!url) return;
 
@@ -582,7 +525,7 @@ export default {
         });
     },
 
-    async handleExport() {
+    async handleExport () {
       const { exportUrl: url } = this;
       if (!url) return;
 
@@ -620,13 +563,13 @@ export default {
         });
     },
 
-    handleAdd() {
+    handleAdd () {
       this.formType = "add";
       this.formTitle = "新增";
       this.formShow = true;
     },
 
-    handleWatch(row) {
+    handleWatch (row) {
       const { idName } = this;
       this.formType = "watch";
       this.formId = row[idName];
@@ -634,7 +577,7 @@ export default {
       this.formShow = true;
     },
 
-    handleEdit(row) {
+    handleEdit (row) {
       const { idName } = this;
       this.formType = "edit";
       this.formId = row[idName];
@@ -642,17 +585,17 @@ export default {
       this.formShow = true;
     },
 
-    handleClose() {
+    handleClose () {
       this.formShow = false;
       this.getTableData();
     },
 
-    handleEditSuccess() {
+    handleEditSuccess () {
       this.handleClose();
       // this.getTableData();
     },
 
-    async handleDelete(rowData, rowIndex) {
+    async handleDelete (rowData, rowIndex) {
       console.log(rowData, rowIndex);
       let { delUrl: url } = this;
       if (!url) return;
@@ -675,7 +618,7 @@ export default {
       }
     },
 
-    computeFmData() {
+    computeFmData () {
       let fmData = {};
       this.searchParams.forEach((item) => {
         fmData[item.keyName] = item.value;
@@ -688,11 +631,11 @@ export default {
       return fmData;
     },
 
-    refresh() {
+    refresh () {
       this.getTableData();
     },
 
-    async getTableData() {
+    async getTableData () {
       const { tableUrl: url } = this;
       if (!url) return;
 
@@ -707,25 +650,25 @@ export default {
         this.total = data.total || 0;
         this.tableData = data.list
           ? data.list.map((item) => {
-              return item;
-            })
+            return item;
+          })
           : [];
       } else {
         this.$message.error(msg);
       }
     },
 
-    handleSizeChange(val) {
+    handleSizeChange (val) {
       this.pageSize = val;
       window.localStorage.setItem("pageSize", val);
       this.getTableData();
     },
-    handleCurrentChange(val) {
+    handleCurrentChange (val) {
       this.pageNo = val;
       this.getTableData();
     },
 
-    resetSearch() {
+    resetSearch () {
       console.log("----------------resetSearch", this.searchParams);
       this.searchParams.forEach((item) => {
         if (typeof item.value == "string") {