sq_dataview/src/components/editManage.vue

<template>
  <div>
    <el-dialog
      :class="'ContentDetail'"
      v-model="isDialogShow"
      width="650px"
      top="7%"
      title="员工信息"
      :close-on-click-modal="false"
      :before-close="dialogBeforeClose"
      draggable
      style="overflow: auto; height: 700px"
    >
      <el-form :model="dataForm" :rules="dataFormRules" label-width="150px" ref="dataForm">
        <el-form-item :label="'ID(内置)'" v-show="false">
          <el-input v-model="dataForm.id" />
        </el-form-item>
        <el-form-item :label="'标题(内置)'" prop="title" :rules="dataFormRules.required">
          <el-input v-model="dataForm.title" :placeholder="'请输入标题'" :disabled="isView" />
        </el-form-item>
        <el-form-item :label="'描述(内置)'" prop="content" :rules="dataFormRules.required">
          <el-input v-model="dataForm.content" :placeholder="'请输入描述'" :disabled="isView" />
        </el-form-item>
        <!-- :label="formItem.alias + ':'" -->
        <el-form-item
          v-for="formItem in modelFieldList"
          :key="formItem.name"
          :prop="formItem.name"
          :rules="formItem.must ? dataFormRules.required : false"
        >
          <template #label>
            <!-- <span title="这里是额外的信息">用户名</span> -->
            <span class="el-form-item-label" :title="formItem.alias">{{ formItem.alias }}:</span>
          </template>

          <!--文本内容  formItem.describe-->

           <el-input
              v-if="['varchar', 'content', 'text'].indexOf(formItem.frontType) > -1"
              v-model="dataForm[formItem.name]"
              :type="formItem.itemType == 'password' ? 'password' : 'text'"
              :placeholder="`请输入${formItem.alias}`"
              :disabled="isView"
            >
              <!-- 后缀插槽：放置眼睛图标 -->
              <template #suffix v-if="formItem.name == 'password'">
                <el-icon
                  class="cursor-pointer"
                  @click="togglePassword(formItem)"
                >
                  <View v-if="showPassword" />
                  <Hide v-else />
                </el-icon>
              </template>
            </el-input>

          <!-- <el-input
            v-if="['varchar', 'content', 'text'].indexOf(formItem.frontType) > -1"
            v-model="dataForm[formItem.name]"
            :type="formItem.name == 'password' ? 'password' : 'text'"
            :placeholder="`请输入${formItem.alias}`"
            :disabled="isView"
          /> -->
          <!--日期时间  formItem.describe-->
          <span v-else-if="['date_time'].indexOf(formItem.frontType) > -1">
            <el-date-picker
              v-if="!isView"
              type="datetime"
              v-model="dataForm[formItem.name]"
              value-format="x"
              :placeholder="`请输入${formItem.alias}`"
            />
            <span v-else>{{
              dataForm[formItem.name] == "" ||
              dataForm[formItem.name] == undefined ||
              dataForm[formItem.name] == null
                ? "无数据"
                : handleDateFormat(dataForm[formItem.name], formItem.dateType)
            }}</span>
          </span>

          <!--整数类型  formItem.describe-->
          <el-input-number
            v-if="['int_num'].indexOf(formItem.frontType) > -1"
            style="width: 80%"
            v-model="dataForm[formItem.name]"
            :placeholder="`请输入${formItem.alias}`"
            :disabled="isView"
          />
          <!--浮点类型  formItem.describe-->
          <el-input-number
            v-if="['float_num'].indexOf(formItem.frontType) > -1"
            :min="formItem.min"
            :max="formItem.max"
            style="width: 80%"
            v-model="dataForm[formItem.name]"
            :placeholder="`请输入${formItem.alias}`"
            :disabled="isView"
          />
          <!--布尔类型  formItem.describe-->
          <span v-if="['boolean'].indexOf(formItem.frontType) > -1">
            <el-switch
              :active-text="'true'"
              :inactive-text="'false'"
              v-model="dataForm[formItem.name]"
              :disabled="isView"
            />
            <span style="font-size: 7px; color: #606266; display: inline-block; margin-left: 8px">
              [{{ formItem.alias }}]
            </span>
          </span>

          <!--单选类型-->
          <el-radio-group
            v-if="['check'].indexOf(formItem.frontType) > -1"
            v-model="dataForm[formItem.name]"
            :disabled="isView"
          >
            <el-radio
              v-for="itemItem in itemLists[formItem.extendId]"
              :key="itemItem.index"
              :label="itemItem.index"
            >
              {{ itemItem.name }}
            </el-radio>
          </el-radio-group>
          <!--多选类型-->
          <el-checkbox-group
            v-if="['multiple_check'].indexOf(formItem.frontType) > -1"
            v-model="dataForm[formItem.name]"
            :disabled="isView"
          >
            <el-checkbox
              v-for="item in itemLists[formItem.extendId]"
              :key="item.index"
              :label="item.index"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
          <!--类别 formItem.describe-->
          <el-select
            clearable
            v-if="['select'].indexOf(formItem.frontType) > -1"
            v-model="dataForm[formItem.name]"
            :placeholder="`请输入${formItem.alias}`"
            :disabled="isView"
          >
            <el-option
              v-for="item in itemLists[formItem.extendId]"
              :key="item.index"
              :label="item.name"
              :value="item.index"
            >
              <div
                :style="{
                  width: '100%',
                  height: '100%',
                  'background-color': item.bgColor,
                }"
              >
                <el-image
                  style="width: 25px; height: 25px; vertical-align: middle; margin-right: 3px"
                  :src="item.icon"
                  fit="fill"
                >
                  <template #error>
                    <div class="image-slot"></div>
                  </template>
                </el-image>
                <span :style="{ color: item.frontColor }">{{ item.name }}</span>
              </div>
            </el-option>
          </el-select>
          <!--多级类别-->
          <el-cascader
            clearable
            v-if="['multiple_select'].indexOf(formItem.frontType) > -1"
            v-model="dataForm[formItem.name]"
            :options="itemLists[formItem.extendId]"
            :props="{
              label: 'name',
              value: 'index',
              checkStrictly: true,
              emitPath: false,
            }"
            :disabled="isView"
          >
            <template #default="{ node, data }">
              <div style="display: none">{{ node }}</div>
              <div
                :style="{
                  width: '100%',
                  height: '100%',
                  'background-color': data.bgColor,
                }"
              >
                <el-image
                  style="width: 25px; height: 25px; vertical-align: middle; margin-right: 3px"
                  :src="data.icon"
                  fit="fill"
                >
                  <template #error>
                    <div class="image-slot"></div>
                  </template>
                </el-image>
                <span :style="{ color: data.frontColor }">{{ data.name }}</span>
              </div>
            </template>
          </el-cascader>

          <!-- 经纬度、点、线、面选择 formItem.describe-->
          <span
            v-if="
              [
                'latlng',
                'point',
                'polyline',
                'polygon',
                'spoint',
                'spolyline',
                'spolygon',
                'map_draw',
              ].indexOf(formItem.frontType) > -1
            "
          >
            <el-input v-show="false" v-model="dataForm[formItem.name]" />
            <el-button @click="handleMapSelect(formItem)">
              <span>{{ isView ? "查看" : "设置" }}</span
              >地理元素
            </el-button>
            <el-icon
              :color="'green'"
              style="margin: 0 5px"
              v-if="dataForm[formItem.name] && dataForm[formItem.name] != ''"
            >
              <ElIconCircleCheck />
            </el-icon>
            <span style="font-size: 10px; color: #606266; display: inline-block; margin-left: 5px">
              {{ formItem.alias }}
            </span>
          </span>

          <!--文件/图片/音频/视频 formItem.describe-->
          <span v-if="['files', 'picture', 'video', 'audio'].indexOf(formItem.frontType) > -1">
            <el-upload
              :ref="formItem.name + '-upload'"
              :file-list="dataForm[formItem.name + '-fileList']"
              :limit="1"
              :http-request="(options) => handleUpload(options, formItem.name)"
              :before-upload="
                (rawFile) =>
                  handleBeforeUpload(rawFile, formItem.name + '-upload', formItem.frontType)
              "
              :on-exceed="(val) => handleUploadExceed(val, formItem.name)"
              :before-remove="(val) => handleUploadRemove(val, formItem.name)"
              :on-preview="(file) => handlePreview(file, formItem.frontType)"
              :disabled="isView"
            >
              <el-input v-model="dataForm[formItem.name]" :disabled="true" v-show="false" />
              <el-button type="primary" :disabled="isView">选择文件</el-button>
              <el-icon
                :color="'green'"
                style="margin: 0 5px"
                v-if="
                  dataForm[formItem.name + '-fileStatus'] !== -1 &&
                  dataForm[formItem.name] &&
                  dataForm[formItem.name] != ''
                "
              >
                <ElIconCircleCheck />
              </el-icon>
              <span v-if="dataForm[formItem.name + '-fileStatus'] === -1">
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  popper-class="file_warning"
                  content="文件无法访问"
                >
                  <template #reference>
                    <el-icon :color="'orange'" style="margin: 0 5px; cursor: help">
                      <ElIconWarning />
                    </el-icon>
                  </template>
                </el-popover>
              </span>
              <template #tip>
                <span class="el-upload__tip" style="display: inline-block; margin-left: 10px">
                  {{ formItem.alias }}
                </span>
              </template>
            </el-upload>
          </span>

          <!--带地理位置的图片、音频、视频 formItem.describe-->
          <span
            v-if="
              ['picture_location', 'audio_location', 'video_location'].indexOf(formItem.frontType) >
              -1
            "
          >
            <el-upload
              :ref="formItem.name + '-upload'"
              :file-list="dataForm[formItem.name + '-fileList']"
              :limit="1"
              :http-request="(options) => handleUpload(options, formItem.name + '-file', true)"
              :before-upload="
                (rawFile) => handleBeforeUpload(rawFile, formItem.name, formItem.frontType)
              "
              :on-exceed="(val) => handleUploadExceed(val, formItem.name + '-file')"
              :before-remove="(val) => handleUploadRemove(val, formItem.name + '-file', true)"
              :on-preview="(file) => handlePreview(file, formItem.frontType)"
              :disabled="isView"
            >
              <el-button type="primary" :disabled="isView">选择文件</el-button>
              <el-icon
                :color="'green'"
                style="margin: 0 5px"
                v-if="
                  dataForm[formItem.name + '-fileStatus'] !== -1 &&
                  dataForm[formItem.name + '-file'] &&
                  dataForm[formItem.name + '-file'] != ''
                "
              >
                <ElIconCircleCheck />
              </el-icon>
              <span v-if="dataForm[formItem.name + '-fileStatus'] === -1">
                <el-popover
                  placement="top-start"
                  trigger="hover"
                  popper-class="file_warning"
                  content="文件无法访问"
                >
                  <template #reference>
                    <el-icon :color="'orange'" style="margin: 0 5px; cursor: help">
                      <ElIconWarning />
                    </el-icon>
                  </template>
                </el-popover>
              </span>
              <template #tip>
                <span class="el-upload__tip" style="display: inline-block; margin-left: 10px">
                  {{ formItem.alias }}
                </span>
              </template>
            </el-upload>
            <el-button @click="handleMapSelect(formItem, formItem.name + '-location')">
              <span>{{ isView ? "查看" : "设置" }}</span
              >地理位置
            </el-button>
            <el-icon
              :color="'green'"
              style="margin: 0 5px"
              v-if="
                dataForm[formItem.name + '-location'] && dataForm[formItem.name + '-location'] != ''
              "
            >
              <ElIconCircleCheck />
            </el-icon>
          </span>

          <!--图册-->
          <el-upload
            v-if="['pictures'].indexOf(formItem.frontType) > -1"
            list-type="picture-card"
            :file-list="dataForm[formItem.name + '-fileList']"
            :disabled="isView"
            :http-request="(options) => handleTCUpload(options, formItem.name)"
            :on-preview="(file) => handleTCPreview(file)"
          >
            <el-icon v-if="!isView">
              <ElIconPlus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="sure" v-if="!isView">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :class="'ContentMap'"
      v-model="isMapShow"
      v-if="isMapShow"
      width="1200px"
      top="7%"
      bottom="5%"
      title="地图选择"
      :close-on-click-modal="false"
      :before-close="mapDialogBeforeClose"
    >
      <div style="width: 100%; height: 40px; padding-bottom: 5px" v-if="!isView">
        <el-button
          style="margin: 5px"
          @click="mapMarkPoint"
          v-if="
            [
              'map_draw',
              'latlng',
              'point',
              'spoint',
              'picture_location',
              'audio_location',
              'video_location',
            ].indexOf(currMapItem.frontType) > -1
          "
          >点标记</el-button
        >
        <el-button
          style="margin: 5px"
          @click="mapMarkLine"
          v-if="['map_draw', 'polyline', 'spolyline'].indexOf(currMapItem.frontType) > -1"
          >线标记</el-button
        >
        <el-button
          style="margin: 5px"
          @click="mapMarkPolygon"
          v-if="['map_draw', 'polygon', 'spolygon'].indexOf(currMapItem.frontType) > -1"
          >面标记</el-button
        >
        <el-button style="margin: 5px" @click="calcelMark">取消标记</el-button>
      </div>
      <div id="mapContent">
        <div id="mapPicker" style="width: 100%; height: 100%"></div>
      </div>
      <div id="mapRight">
        <el-form :label-position="'top'">
          <el-form-item :label="'地理信息预览:'">
            <!-- <json-viewer
              :style="{ height: '350px', overflow: 'auto' }"
              :value="JSON.parse(JSON.stringify(geoJsons))"
              :expand-depth="5"
              copyable
              boxed
              sort
            ></json-viewer> -->
            <div
              style="position: absolute; z-index: 9; top: 2px; right: 50px; cursor: pointer"
              @click="copyText(geoJsons)"
            >
              复制
            </div>
            <json-editor-vue
              class="json-editor"
              :modeList="couldView"
              :style="{ height: '370px', width: '100%', overflow: 'auto' }"
              :modelValue="JSON.parse(JSON.stringify(geoJsons))"
              @update:modelValue="changeValue"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button type="primary" @click="mapSure()" v-if="!isView">确定</el-button>
      </template>
    </el-dialog>

    <el-dialog v-if="isMediaShow" v-model="isMediaShow" title="资源预览">
      <span v-if="currMedia.images">
        <!-- style="width: 200px; height: 200px; margin: 5px" -->
        <el-image
          w-full
          v-for="(item, index) in currMedia.images"
          :key="index"
          :src="item"
          :fit="fit"
        />
      </span>
      <span v-if="currMedia.video">
        <video width="500" height="300" :src="currMedia.video" controls></video>
      </span>
      <span v-if="currMedia.audio">
        <audio :src="currMedia.audio" controls></audio>
      </span>
      <span v-if="currMedia.file">
        <el-button>
          <a :href="currMedia.file" :download="currMedia.file">点击下载</a>
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { toRaw } from "vue";
import api from "@/api/content";
import { genFileId, ElLoading } from "element-plus";
import moment from "moment";
export default {
  name: "contentDetail",
  data() {
    return {
      isDialogShow: true,
      dataForm: {},
      dataFormRules: {
        required: [
          { required: true, message: "该字段不能为空", trigger: "blur" },
          { required: true, message: "该字段不能为空", trigger: "change" },
        ],
      },
      modelFieldList: [],
      itemLists: {},
      showPassword: false,
      map: {},
      currMapItem: {},
      isMapShow: true,
      mapMarkers: {
        layers: [],
        points: [],
        linePoints: [],
        polPoints: [],
        lines: [],
        pols: [],
      },
      mapLines: [],
      geoJsons: [],

      isMediaShow: false,
      currMedia: {
        images: [],
      },
      mediaTypes: {
        image: ["image/gif", "image/jpeg", "image/jpg", "image/bmp", "image/png"],
        video: ["video/mp4"],
        audio: ["audio/mpeg"],
      },
      couldView: ["code"], // "tree", "code", "form", "view"
    };
  },
  props: {
    isShow: Boolean,
    columnModel: Object,
    column: Object,
    item: Object,
    isView: Boolean,
    close: Function,
  },
  created() {
    let that = this;
    let modelFields = JSON.parse(this.columnModel.fieldList);
    // 无序
    let keys = Object.keys(modelFields);
    for (let i = 0; i < keys.length; i++) {
      let obj = modelFields[keys[i]];
      if (!obj.name) {
        obj = JSON.parse(obj);
      }
      obj["key"] = keys[i];
      if (["check", "multiple_check"].indexOf(obj.frontType) > -1) {
        this.getCheckItems(obj, 1);
      } else if (["select", "multiple_select"].indexOf(obj.frontType) > -1) {
        this.getCheckItems(obj, 2);
      }
      // console.log("==========" + obj);
      obj.itemType = obj.name;
      this.modelFieldList.push(obj);
    }
    // 有序
    // for (let key in modelFields) {
    //   let obj = modelFields[key];
    //   if (!obj.name) {
    //     obj = JSON.parse(obj);
    //   }
    //   obj["key"] = key;
    //   if (["check", "multiple_check"].indexOf(obj.frontType) > -1) {
    //     this.getCheckItems(obj, 1);
    //   } else if (["select", "multiple_select"].indexOf(obj.frontType) > -1) {
    //     this.getCheckItems(obj, 2);
    //   }
    //   debugger
    //   console.log(1111);

    //   this.modelFieldList.push(obj);
    // }
    this.modelFieldList.sort((a, b) => {
      // return a.index > b.index ? 1 : a.sequence > b.sequence ? 1 : -1;
      return a.index > b.index ? 1 : -1;
    });
    if (this.item && this.item !== "" && JSON.stringify(this.item) != "{}") {
      this.modelFieldList.forEach((data) => {
        if (
          ["latlng", "point", "polyline", "polygon", "spoint", "spolyline", "spolygon"].indexOf(
            data.frontType
          ) > -1
        ) {
          that.item[data.name] = that.item[data.name];
        } else if (
          ["picture_location", "audio_location", "video_location"].indexOf(data.frontType) > -1
        ) {
          let obj = JSON.parse(that.item[data.name]);
          that.item[data.name + "-file"] = obj.url;
          api
            .getContentFile(obj.url)
            .then((response) => {
              that.item[data.name + "-fileList"] = [];
              let file = new File(
                [response],
                that.item[data.name].substr(
                  that.item[data.name].length - 40,
                  that.item[data.name].length
                )
              );
              file.serverUrl = obj.url;
              that.item[data.name + "-fileList"].push(file);
            })
            .catch((err) => {
              if (err.response.status !== 200) {
                that.item[data.name + "-fileStatus"] = -1;
              }
            });
          that.item[data.name + "-location"] = obj.location;
        } else if ("multiple_check" == data.frontType) {
          if (!that.item[data.name]) {
            that.item[data.name] = [];
          } else {
            let val = [];
            let splice = that.item[data.name].split(",");
            for (let i = 0; i < splice.length; i++) {
              val.push(Number(splice[i]));
            }
            that.item[data.name] = val;
          }
        } else if (["check", "select", "multiple_select"].indexOf(data.frontType) > -1) {
          that.item[data.name] = isNaN(Number(that.item[data.name])) ? '' : Number(that.item[data.name]);
        } else if (["files", "picture", "audio", "video"].indexOf(data.frontType) > -1) {
          if (!that.item[data.name]) return;
          api
            .getContentFile(that.item[data.name])
            .then((response) => {
              that.item[data.name + "-fileList"] = [];
              let file = new File(
                [response],
                that.item[data.name].substr(
                  that.item[data.name].length - 40,
                  that.item[data.name].length
                )
              );
              file.serverUrl = that.item[data.name];
              that.item[data.name + "-fileList"].push(file);
            })
            .catch((err) => {
              if (err.response.status !== 200) {
                that.item[data.name + "-fileStatus"] = -1;
              }
            });
        } else if ("pictures" === data.frontType) {
          if (!that.item[data.name]) {
            that.item[data.name + "-fileList"] = [];
            return;
          }

          let obj = JSON.parse(that.item[data.name]);
          that.item[data.name + "-fileList"] = [];
          obj.forEach((i) => {
            let url =
              i.indexOf(systemConfig.dmsDataProxy) !== 0 ? systemConfig.dmsDataProxy + i : i;
            that.item[data.name + "-fileList"].push({
              name: i.substr(i.length - 40, i.length),
              url: url,
              serverUrl: i,
            });
          });
        }
      });
    }
    this.dataForm = this.item;
    // console.log(this.dataForm)
  },
  mounted() {
    this.isMapShow = false;
  },
  methods: {
    async textToCopy() {
      let that = this;
      // copyText(JSON.stringify(that.geoJsons))
      await navigator.clipboard.writeText(JSON.stringify(that.geoJsons));
      this.$message({ message: "复制成功", type: "success" });
    },
    togglePassword(formItem) {
      if(this.showPassword){
        formItem.itemType = "password";
      }else{
        formItem.itemType = "text";
      }
      this.showPassword = !this.showPassword;
    },
    changeValue(json) {
      let that = this;
      let Icon = L.divIcon({
        className: "my-div-icon", //自定义icon css样式
        iconSize: [10, 10], //点大小
      });
      that.geoJsons = json;
      let center = that.geoJsons[0].geometry.coordinates;
      let type = that.geoJsons[0].geometry.type;
      if (type == "Point") {
        //更新点坐标
        that.mapMarkers.points[0].setLatLng([center[1], center[0]]);
      } else if (type == "LineString") {
        // 更新面数据
        let geojsons = [];
        that.mapMarkers.layers.forEach((item) => {
          that.map.removeLayer(item);
        });
        that.mapMarkers = {
          layers: [],
          points: [],
          linePoints: [],
          polPoints: [],
          lines: [],
          pols: [],
        };

        for (var i = 0; i < that.geoJsons.length; i++) {
          that.geoJsons[i].geometry.coordinates.forEach((item) => {
            let marker = L.marker([item[1], item[0]], {
              icon: Icon,
            }).addTo(that.map);
            if (["polyline", "spolyline"].indexOf(that.currMapItem.frontType) > -1) {
              that.mapMarkers.lines.forEach((item) => {
                that.map.removeLayer(item);
              });
              that.mapMarkers.lines = [];
              geojsons = [];
            }
            //添加点到地图中
            that.mapMarkers.linePoints.push(marker);
            that.mapMarkers.layers.push(marker);
            if (that.mapMarkers.linePoints.length > 1) {
              let points = [];
              that.mapMarkers.linePoints.forEach((item) => {
                points.push([item._latlng.lat, item._latlng.lng]);
              });
              let line = L.polyline(points, {
                color: "red",
              }).addTo(that.map);
              that.mapMarkers.layers.push(line);
              if (
                that.currMapItem.frontType == "map_draw" &&
                that.mapMarkers.linePoints.length > 2
              ) {
                let lastLine = that.mapMarkers.lines[that.mapMarkers.lines.length - 1];
                that.map.removeLayer(lastLine);
                that.mapMarkers.lines.splice(that.mapMarkers.lines.length - 1, 1);
                geojsons.splice(geojsons.length - 1, 1);
              }
              that.mapMarkers.lines.push(line);
              geojsons.push(line.toGeoJSON());
            }
          });
        }
        that.geoJsons = geojsons;
      } else if (type == "Polygon") {
        let geojsons = [];
        that.mapMarkers.layers.forEach((item) => {
          that.map.removeLayer(item);
        });
        that.mapMarkers = {
          layers: [],
          points: [],
          linePoints: [],
          polPoints: [],
          lines: [],
          pols: [],
        };
        for (var i = 0; i < that.geoJsons.length; i++) {
          that.geoJsons[i].geometry.coordinates.forEach((coordItem) => {
            coordItem.forEach((item) => {
              let marker = L.marker([item[1], item[0]], {
                icon: Icon,
              }).addTo(that.map);
              //添加点到地图中
              that.mapMarkers.polPoints.push(marker);
              that.mapMarkers.layers.push(marker);

              if (["polygon", "spolygon"].indexOf(that.currMapItem.frontType) > -1) {
                that.mapMarkers.pols.forEach((item) => {
                  that.map.removeLayer(item);
                });
                that.mapMarkers.pols = [];
                geojsons = [];
              }

              if (that.mapMarkers.polPoints.length > 2) {
                let points = [];
                that.mapMarkers.polPoints.forEach((item) => {
                  points.push([item._latlng.lat, item._latlng.lng]);
                });
                let polygon = L.polygon(points, {
                  color: "red",
                }).addTo(that.map);
                that.mapMarkers.layers.push(polygon);
                if (
                  that.currMapItem.frontType == "map_draw" &&
                  that.mapMarkers.polPoints.length > 3
                ) {
                  let lastPol = that.mapMarkers.pols[that.mapMarkers.pols.length - 1];
                  that.map.removeLayer(lastPol);
                  that.mapMarkers.pols.splice(that.mapMarkers.pols.length - 1, 1);
                  geojsons.splice(geojsons.length - 1, 1);
                }
                that.mapMarkers.pols.push(polygon);
                geojsons.push(polygon.toGeoJSON());
              }
            });
          });
        }
        that.geoJsons = geojsons;
      }
      let bboxObj = {
        type: "FeatureCollection",
        features: that.geoJsons.map(function (item) {
          if (item.type == "Feature") {
            return item;
          } else {
            return {
              type: "Feature",
              geometry: item,
            };
          }
        }),
      };
      let extent = turf.bbox(bboxObj);
      var bounds = L.latLngBounds([
        [extent[3], extent[2]],
        [extent[1], extent[0]],
      ]);

      //定位到矩形
      that.map.fitBounds(bounds, { padding: [10, 10], maxZoom: 15 });
    },
    dialogBeforeClose() {
      this.close();
    },
    mapDialogBeforeClose() {
      this.isMapShow = false;
      this.calcelMark();
      this.geoJsons = [];
      this.mapMarkers = {
        layers: [],
        points: [],
        linePoints: [],
        polPoints: [],
        lines: [],
        pols: [],
      };
    },
    handleMapFileChange(name) {
      if (
        this.dataForm[name + "-file"] &&
        this.dataForm[name + "-file"] !== "" &&
        this.dataForm[name + "-location"] &&
        this.dataForm[name + "-location"] !== ""
      ) {
        let obj = {
          location: this.dataForm[name + "-location"],
          url: this.dataForm[name + "-file"],
        };
        this.dataForm[name] = obj;
      } else {
        this.dataForm[name] = "";
      }
      this.$refs.dataForm.validateField(name);
    },
    mapSure() {
      this.isMapShow = false;
      if (this.geoJsons.length < 1) {
        this.dataForm[this.currMapItem.name] = null;
      } else {
        if (
          [
            "latlng",
            "point",
            "spoint",
            "polyline",
            "spolyline",
            "polygon",
            "spolygon",
            "picture_location",
            "audio_location",
            "video_location",
          ].indexOf(this.currMapItem.frontType) > -1
        ) {
          this.dataForm[this.currMapItem.name] = this.$WKT.convert(this.geoJsons[0].geometry);
        } else {
          let geoCollection = {
            type: "FeatureCollection",
            features: [],
          };
          this.geoJsons.forEach((item) => {
            geoCollection.features.push(toRaw(item));
          });
          this.dataForm[this.currMapItem.name] = JSON.stringify(geoCollection);
        }
      }
      if (
        ["picture_location", "audio_location", "video_location"].indexOf(
          this.currMapItem.frontType
        ) > -1
      ) {
        this.handleMapFileChange(this.currMapItem.name.substr(0, this.currMapItem.name.length - 9));
      }
      this.calcelMark();
      this.geoJsons = [];
      this.mapMarkers = {
        layers: [],
        points: [],
        linePoints: [],
        polPoints: [],
        lines: [],
        pols: [],
      };
    },
    mapMarkPoint() {
      let that = this;
      that.map.off("click");
      let Icon = L.divIcon({
        className: "my-div-icon", //自定义icon css样式
        iconSize: [10, 10], //点大小
      });
      that.map.on("click", function (e) {
        var lat = e.latlng.lat; //纬度
        var lng = e.latlng.lng; //经度
        //打点
        if (
          [
            "latlng",
            "point",
            "spoint",
            "picture_location",
            "audio_location",
            "video_location",
          ].indexOf(that.currMapItem.frontType) > -1 &&
          that.mapMarkers.points.length > 0
        ) {
          //更新点坐标
          that.mapMarkers.points[0].setLatLng([lat, lng]);
          that.geoJsons[0] = that.mapMarkers.points[0].toGeoJSON();
        } else {
          let marker = L.marker([lat, lng], {
            icon: Icon,
          }).addTo(that.map);
          //添加点到地图中
          that.mapMarkers.points.push(marker);
          that.mapMarkers.layers.push(marker);
          that.geoJsons.push(marker.toGeoJSON());
        }
      });
    },
    mapMarkLine() {
      let that = this;
      if (this.currMapItem.frontType == "map_draw") {
        that.mapMarkers.linePoints = [];
      }
      that.map.off("click");
      let Icon = L.divIcon({
        className: "my-div-icon", //自定义icon css样式
        iconSize: [10, 10], //点大小
      });
      that.map.on("click", function (e) {
        var lat = e.latlng.lat; //纬度
        var lng = e.latlng.lng; //经度
        let marker = L.marker([lat, lng], {
          icon: Icon,
        }).addTo(that.map);
        if (["polyline", "spolyline"].indexOf(that.currMapItem.frontType) > -1) {
          that.mapMarkers.lines.forEach((item) => {
            that.map.removeLayer(item);
          });
          that.mapMarkers.lines = [];
          that.geoJsons = [];
        }
        //添加点到地图中
        that.mapMarkers.linePoints.push(marker);
        that.mapMarkers.layers.push(marker);
        if (that.mapMarkers.linePoints.length > 1) {
          let points = [];
          that.mapMarkers.linePoints.forEach((item) => {
            points.push([item._latlng.lat, item._latlng.lng]);
          });
          let line = L.polyline(points, {
            color: "red",
          }).addTo(that.map);
          that.mapMarkers.layers.push(line);
          if (that.currMapItem.frontType == "map_draw" && that.mapMarkers.linePoints.length > 2) {
            let lastLine = that.mapMarkers.lines[that.mapMarkers.lines.length - 1];
            that.map.removeLayer(lastLine);
            that.mapMarkers.lines.splice(that.mapMarkers.lines.length - 1, 1);
            that.geoJsons.splice(that.geoJsons.length - 1, 1);
          }
          that.mapMarkers.lines.push(line);
          that.geoJsons.push(line.toGeoJSON());
        }
      });
    },
    mapMarkPolygon() {
      let that = this;
      if (this.currMapItem.frontType == "map_draw") {
        that.mapMarkers.polPoints = [];
      }
      that.map.off("click");
      let Icon = L.divIcon({
        className: "my-div-icon", //自定义icon css样式
        iconSize: [10, 10], //点大小
      });
      that.map.on("click", function (e) {
        var lat = e.latlng.lat; //纬度
        var lng = e.latlng.lng; //经度
        let marker = L.marker([lat, lng], {
          icon: Icon,
        }).addTo(that.map);
        //添加点到地图中
        that.mapMarkers.polPoints.push(marker);
        that.mapMarkers.layers.push(marker);

        if (["polygon", "spolygon"].indexOf(that.currMapItem.frontType) > -1) {
          that.mapMarkers.pols.forEach((item) => {
            that.map.removeLayer(item);
          });
          that.mapMarkers.pols = [];
          that.geoJsons = [];
        }

        if (that.mapMarkers.polPoints.length > 2) {
          let points = [];
          that.mapMarkers.polPoints.forEach((item) => {
            points.push([item._latlng.lat, item._latlng.lng]);
          });
          let polygon = L.polygon(points, {
            color: "red",
          }).addTo(that.map);
          that.mapMarkers.layers.push(polygon);
          if (that.currMapItem.frontType == "map_draw" && that.mapMarkers.polPoints.length > 3) {
            let lastPol = that.mapMarkers.pols[that.mapMarkers.pols.length - 1];
            that.map.removeLayer(lastPol);
            that.mapMarkers.pols.splice(that.mapMarkers.pols.length - 1, 1);
            that.geoJsons.splice(that.geoJsons.length - 1, 1);
          }
          that.mapMarkers.pols.push(polygon);
          that.geoJsons.push(polygon.toGeoJSON());
        }
      });
    },
    calcelMark() {
      let that = this;
      that.map.off("click");
      that.mapMarkers.layers.forEach((item) => {
        that.map.removeLayer(item);
      });
      that.mapMarkers = {
        layers: [],
        points: [],
        linePoints: [],
        polPoints: [],
        lines: [],
        pols: [],
      };
      this.geoJsons = [];
    },
    handleMapSelect(item, alias) {
      this.isMapShow = true;
      item = JSON.parse(JSON.stringify(item));
      if (alias && alias != "") {
        item.name = alias;
      }
      this.currMapItem = item;
      let that = this;
      this.$nextTick(() => {
        that.map = that.$L.map("mapPicker", {
          minZoom: 3,
          maxZoom: 20,
          // center: [39.915457, 116.453437],
          center: [31.175188130627745, 121.26786280328167],
          zoom: 15,
          zoomControl: false,
          attributionControl: false,
          crs: L.CRS.EPSG4326,
        });
        that.$L
          .tileLayer(systemConfig.VEC_C + systemConfig.TDT_TK, {
            maxZoom: 20,
            tileSize: 256,
            zoomOffset: 1,
          })
          .addTo(that.map);
        that.$L
          .tileLayer(systemConfig.CVA_C + systemConfig.TDT_TK, {
            maxZoom: 20,
            tileSize: 256,
            zoomOffset: 1,
          })
          .addTo(that.map);
        if (that.dataForm[item.name]) {
          let Icon = L.divIcon({
            className: "my-div-icon", //自定义icon css样式
            iconSize: [10, 10], //点大小
          });
          let geojsons = [];
          if (that.currMapItem.frontType != "map_draw") {
            if (that.dataForm[item.name].value) {
              geojsons.push(that.$WKT.parse(that.dataForm[item.name].value));
            } else {
              geojsons.push(that.$WKT.parse(that.dataForm[item.name]));
            }
          } else {
            let obj = JSON.parse(that.dataForm[item.name]);
            if (obj.features && obj.features !== "") {
              obj.features.forEach((i) => geojsons.push(i));
            }
          }

          let bboxObj = {
            type: "FeatureCollection",
            features: geojsons.map(function (item) {
              if (item.type == "Feature") {
                return item;
              } else {
                return {
                  type: "Feature",
                  geometry: item,
                };
              }
            }),
          };
          let extent = turf.bbox(bboxObj);
          var bounds = L.latLngBounds([
            [extent[3], extent[2]],
            [extent[1], extent[0]],
          ]);

          //定位到矩形
          that.map.fitBounds(bounds);

          // console.log(t)

          for (let i = 0; i < geojsons.length; i++) {
            let layer = that.$L
              .geoJSON(geojsons[i], {
                onEachFeature: function (feature, layer) {
                  if (feature.properties && feature.properties.name) {
                    layer.bindTooltip(feature.properties.name);
                    layer.bindPopup(feature.properties.address);
                  }
                },
                pointToLayer: function (feature, latlng) {
                  let marker = L.marker(latlng, {
                    icon: Icon,
                  });
                  that.mapMarkers.points.push(marker);
                  return marker;
                },
              })
              .addTo(that.map);
            that.geoJsons.push(layer.toGeoJSON().features[0]);
          }
        }
      });
    },

    handleBeforeUpload(file, ref, type) {
      let fileType = file.type;
      let fileSize = file.size / 1024 / 1024;
      // 判断类型
      if (["picture", "picture_location"].indexOf(type) > -1) {
        if (this.mediaTypes.image.indexOf(fileType) < 0) {
          this.$message({ message: "不支持的图片类型", type: "warning" });
          return false;
        }
      } else if (["audio", "audio_location"].indexOf(type) > -1) {
        if (this.mediaTypes.audio.indexOf(fileType) < 0) {
          this.$message({ message: "不支持的音频类型", type: "warning" });
          return false;
        }
      } else if (["video", "video_location"].indexOf(type) > -1) {
        if (this.mediaTypes.video.indexOf(fileType) < 0) {
          this.$message({ message: "不支持的视频类型", type: "warning" });
          return false;
        }
      }
      // 判断大小
      if (["video", "video_location"].indexOf(type) > -1) {
        if (fileSize > 40) {
          this.$message({ message: "文件不能超过40M", type: "warning" });
          return false;
        }
      } else {
        if (fileSize > 10) {
          this.$message({ message: "文件不能超过10M", type: "warning" });
          return false;
        }
      }
      return true;
    },
    handleUpload(options, ref, isMapFile, isMulti) {
      let that = this;
      let params = {
        columnId: this.columnModel.id,
        contentId: this.item.id,
        paraName: options.file.name,
        type: 0,
        file: options.file,
      };
      const loadingInstance = ElLoading.service({
        customClass: "content-detail-upload-loading",
        fullscreen: true,
        text: "上传中，请稍后...",
      });
      api.uploadFile(params).then((res) => {
        if (res.code === 200) {
          loadingInstance.close();
          that.dataForm[ref + "-fileStatus"] = null;
          options.file.serverUrl = res.content;
          if (isMulti) {
            let urls = [];
            that.dataForm[ref + "-fileList"].forEach((i) => {
              let serverUrl = i.raw ? i.raw.serverUrl : i.serverUrl ? i.serverUrl : "";
              urls.push(serverUrl);
            });
            that.dataForm[ref] = urls;
          } else {
            that.dataForm[ref] = res.content;
          }
          if (isMapFile) {
            this.handleMapFileChange(ref.substr(0, ref.length - 5));
          }
        } else {
          loadingInstance.close();
          that.$message({ message: res.content, type: "error" });
        }
      });
    },
    handleUploadExceed(file, ref) {
      this.$refs[ref + "-upload"][0].clearFiles();
      file = file[0];
      file.uid = genFileId();
      this.$refs[ref + "-upload"][0].handleStart(file);
      this.$refs[ref + "-upload"][0].submit();
    },
    handleUploadRemove(file, ref, isMapFile) {
      this.dataForm[ref] = "";
      if (isMapFile) {
        this.handleMapFileChange(ref.substr(0, ref.length - 5));
      }
    },
    handlePreview(file, type) {
      this.isMediaShow = true;
      this.currMedia = {};
      let serverUrl = file.raw ? file.raw.serverUrl : file.serverUrl ? file.serverUrl : "";
      let url =
        serverUrl.indexOf(systemConfig.dmsDataProxy) !== 0
          ? systemConfig.dmsDataProxy + serverUrl
          : serverUrl;
      if (["picture", "picture_location"].indexOf(type) > -1) {
        this.currMedia.images = [url];
      } else if (["video", "video_location"].indexOf(type) > -1) {
        this.currMedia.video = url;
      } else if (["audio", "audio_location"].indexOf(type) > -1) {
        this.currMedia.audio = url;
      } else {
        this.currMedia.file = url;
      }
    },

    handleTCUpload(options, ref) {
      let that = this;
      let params = {
        columnId: this.columnModel.id,
        contentId: this.item.id,
        paraName: options.file.name,
        type: 0,
        file: options.file,
      };
      // loading
      const loadingInstance = ElLoading.service({
        customClass: "content-detail-upload-loading",
        fullscreen: true,
        text: "上传中，请稍后...",
      });
      api.uploadFile(params).then((res) => {
        if (res.code === 200) {
          loadingInstance.close();
          that.dataForm[ref + "-fileStatus"] = null;
          options.file.serverUrl = res.content;
          let url = systemConfig.dmsDataProxy + res.content;
          that.dataForm[ref + "-fileList"].push({
            name: options.file.name,
            url: url,
            serverUrl: res.content,
          });
        } else {
          loadingInstance.close();
          that.$message({ message: res.content, type: "error" });
        }
      });
    },
    handleTCPreview(file) {
      file = toRaw(file);
      let serverUrl = file.raw ? file.raw.serverUrl : file.serverUrl ? file.serverUrl : "";
      let url =
        serverUrl.indexOf(systemConfig.dmsDataProxy) !== 0
          ? systemConfig.dmsDataProxy + serverUrl
          : serverUrl;
      this.currMedia.images = [url];
      this.isMediaShow = true;
    },

    handleDateFormat(val, fmt) {
      if (!fmt || fmt == "") {
        fmt = "0";
      }
      if (fmt == "0") {
        return moment(val).format("YYYY-MM-DD");
      } else if (fmt == "1") {
        return moment(val).format("YYYY-MM-DD HH:mm:ss");
      } else if (fmt == "2") {
        return moment(val).format("YYYY-MM-DD HH:mm:ss.ssss");
      } else {
        return moment(val).format("YYYY-MM-DD HH:mm:ss");
      }
    },
    sure() {
      let that = this;
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          // console.log("[ eeeee ] >");
          let content = {};
          content["id"] = that.dataForm["id"];
          content["title"] = that.dataForm["title"];
          content["content"] = that.dataForm["content"];
          that.modelFieldList.forEach((field) => {
            if (field.frontType == "multiple_check") {
              if (that.dataForm[field.name] == undefined) that.dataForm[field.name] = [];
              let str = that.dataForm[field.name].join(",");
              str.replace("[", "");
              str.replace("]", "");
              content[field.name] = str;
            } else if (field.frontType == "date_time") {
              content[field.name] = that.dataForm[field.name];
            } else if (field.frontType == "pictures") {
              content[field.name] = [];
              if (that.dataForm[field.name + "-fileList"]) {
                that.dataForm[field.name + "-fileList"].forEach((i) => {
                  content[field.name].push(i.serverUrl);
                });
              }
              content[field.name] = JSON.stringify(content[field.name]);
            } else {
              content[field.name] = that.dataForm[field.name];
            }
          });
          let params = {
            content: JSON.stringify(content),
            columnId: that.column.columnId,
            modelId: that.column.modelId,
          };
          if (content.id && content.id !== "") {
            api
              .updateContent(params)
              .then((res) => {
                if (res.code === 200) {
                  that.close(true);
                  that.$message({ message: "修改成功", type: "success" });
                } else {
                  that.$message({ message: res.content, type: "error" });
                }
              })
              .catch((err) => {
                that.$message({ message: err.message, type: "error" });
              });
          } else {
            api
              .addContent(params)
              .then((res) => {
                if (res.code === 200) {
                  that.close(true);
                  let message = "添加成功";
                  that.$message({ message: message, type: "success" });
                } else {
                  that.$message({ message: res.content, type: "error" });
                }
              })
              .catch((err) => {
                that.$message({ message: err.message, type: "error" });
              });
          }
        }
      });
    },
    getCheckItems(item, type) {
      let that = this;
      // console.log("[ eee ] >");
      if (type === 1) {
        api.getCheckDetail({ sName: item.extendId }).then((res) => {
          if (res.code == 200) {
            that.itemLists[item.extendId] = res.content;
          }
        });
      } else if (type === 2) {
        let cType =
          item.frontType === "select" ? 0 : item.frontType === "multiple_select" ? 1 : null;
        api.getCategoryDetail({ type: cType, cName: item.extendId }).then((res) => {
          if (res.code == 200) {
            that.itemLists[item.extendId] = res.content;
          }
        });
      }
    },
  },
};
</script>

<style>
.jsoneditor-menu {
  display: none;
}
.jsoneditor-statusbar {
  display: none;
}
.jsoneditor-validation-errors-container {
  display: none;
}
div.jsoneditor-outer.has-main-menu-bar {
  margin-top: 0px;
  padding-top: 40px;
  background-color: #e2f1fa;
}
.full-screen {
  right: 10px !important;
  background-color: #d9d9d9 !important;
}

#mapContent {
  height: 400px;
  width: 70%;
  display: inline-block;
}

#mapRight {
  padding-left: 10px;
  height: 400px;
  width: 25%;
  display: inline-block;
  vertical-align: top;
}

.my-div-icon {
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
}

.file_warning {
  background-color: #fdf6ec !important;
  color: #e8a84a !important;
  font-weight: bold;
}

.el-form-item .el-form-item-label {
  display: inline-block;
  text-align: right;
  /* 防止文本换行 */
  white-space: nowrap;
  /* 隐藏溢出的内容 */
  overflow: hidden;
  /* 显示省略符号 */
  text-overflow: ellipsis;
}

.content-detail-upload-loading svg {
  width: 80px;
  height: 90px;
}

.content-detail-upload-loading .el-loading-text {
  font-size: 20px;
}
</style>

<style lang="less" scoped>
/deep/.el-input__inner{
    color: #000;
}

</style>