zjyzt_gis_master_web_ui/src/components/DataLayer/LayerDetail.vue

<template>
  <el-dialog
    :class="'modelDetailDialog'"
    v-if="isShow"
    :visible.sync="isShow"
    width="800px"
    top="4%"
    :close-on-click-modal="false"
    :before-close="dialogBeforeClose"
  >
    <el-form
      :model="fromDataRender"
      class="modeldetail"
      ref="modelDetail_form"
      label-width="80px"
      :rules="rules"
    >
      <el-row class="second_title">基本信息</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="第三方ID" prop="threeId">
            <el-input
              v-model="fromDataRender.threeId"
              :readonly="!edit"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="第三方表名" prop="tableName">
            <el-input
              v-model="fromDataRender.tableName"
              :readonly="!edit"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="fromDataRender.title"
              :readonly="!edit"
              maxlength="20"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="描述" prop="content">
            <el-input
              v-model="fromDataRender.content"
              :readonly="!edit"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="fromDataRender.type"
              :readonly="!edit"
              placeholder="请选择"
              :disabled="operationType != 0"
            >
              <el-option
                v-for="item in layerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="operationType != 0">
          <el-form-item label="图层ID" prop="type">
            <el-input
              v-model="fromDataRender.id"
              :readonly="true"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="内容描述" prop="jsonStr">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="fromDataRender.jsonStr"
            maxlength="5000"
            show-word-limit
            :readonly="!edit"
            :autosize="{ minRows: 4, maxRows: 6 }"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row class="second_title">符号标识</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="几何类型" prop="geometryType">
            <el-select
              v-model="fromDataRender.geometryType"
              placeholder="请选择"
              :readonly="!edit"
              :disabled="!edit"
            >
              <el-option
                v-for="item in geoTypeArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fromDataRender.geometryType == 'Point'">
        <div class="picture_store">
          <ul>
            <li
              v-for="(item, index) in iconList"
              :class="{ active: item.active }"
              :key="index"
              @click="selectedMark(item)"
              :title="item.iconChieseName"
            >
              <!-- :style="{ backgroundImage: 'url(' + item.url + ')' }" -->
              <img :src="item.url" alt="" />
              <div>{{ item.iconChieseName }}</div>
            </li>
          </ul>
        </div>
      </el-row>
      <el-row>
        <!-- 颜色 -->
        <el-col
          :span="11"
          v-if="
            fromDataRender.geometryType == 'Point' &&
            fromDataRender.iconUrl != '' &&
            fromDataRender.iconUrl.indexOf('.svg') > -1
          "
        >
          <el-form-item
            label="图标颜色"
            prop="lineColor"
            style="margin-bottom: 10px"
          >
            <el-color-picker
              v-model="fromDataRender.fillColor"
              :disabled="!edit"
              color-format="hex"
            ></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fromDataRender.geometryType == 'LineString'">
        <!-- 线宽 -->
        <el-col :span="13">
          <el-form-item label="线宽" prop="lineWidth">
            <el-slider
              v-model="fromDataRender.lineWidth"
              :min="1"
              :max="20"
              show-input
            ></el-slider>
          </el-form-item>
        </el-col>
        <!-- 颜色 -->
        <el-col :span="11">
          <el-form-item label="颜色" prop="lineColor">
            <el-color-picker
              v-model="fromDataRender.lineColor"
              show-alpha
              color-format="rgb"
            ></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="fromDataRender.geometryType == 'Polygon'">
        <!-- 线宽 -->
        <el-col :span="13">
          <el-form-item label="边框线宽" prop="lineWidth">
            <el-slider
              v-model="fromDataRender.lineWidth"
              :min="1"
              :max="20"
              show-input
            ></el-slider>
          </el-form-item>
        </el-col>
        <!-- 线颜色 -->
        <el-col :span="5">
          <el-form-item label="边框线颜色" prop="lineColor">
            <el-color-picker
              v-model="fromDataRender.lineColor"
              show-alpha
              color-format="rgb"
            ></el-color-picker>
          </el-form-item>
        </el-col>
        <!-- 面颜色 -->
        <el-col :span="6">
          <el-form-item label="面颜色" prop="fillColor">
            <el-color-picker
              v-model="fromDataRender.fillColor"
              show-alpha
              color-format="rgb"
            ></el-color-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="title" class="dialog-title">
      <div class="title">
        <span>{{ title }}</span>
      </div>
    </span>
    <span slot="footer" class="dialog-footer" v-if="edit">
      <el-button @click="dialogBeforeClose">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import api from "@/api/model";
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    edit: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    beforeClose: {
      type: Function,
    },
    updateData: {
      type: Function,
    },
    formData: {
      type: Object,
    },
    operationType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      fromDataRender: {
        alpha: "",
        content: "",
        createDate: "",
        fillColor: "#FF0000",
        geometryType: "Point",
        iconUrl: "",
        id: "",
        jsonStr: "",
        lineWidth: "",
        tableName: "",
        threeId: "",
        title: "",
        type: 0,
        updateDate: "",
      },
      geoTypeArr: [
        {
          name: "点",
          value: "Point",
        },
         {
          name: "线",
          value: "LineString",
        },
        {
          name: "面",
          value: "Polygon",
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        threeId: [
          { required: true, message: "请填写第三方Id", trigger: "blur" },
        ],
        tableName: [
          { required: true, message: "请填写第三方表名", trigger: "blur" },
        ],
        content: [{ required: true, message: "请填写描述", trigger: "blur" }],
        jsonStr: [{ required: true, message: "请填写描述", trigger: "blur" }],
        type: [
          {
            required: true,
            message: "请选择图层类型",
            trigger: "change",
          },
        ],
      },
      iconList: [],
      tipShow: false,
      tips: "",
    };
  },
  created() {},
  methods: {
    // 创建
    sure() {
      let that = this;
      let data;
      this.$refs["modelDetail_form"].validate((valid) => {
        if (valid) {
          if (that.operationType == 0) {
            // 增加
            data = Object.assign({}, that.fromDataRender);
            delete data.id;
            delete data.updateDate;
            delete data.createDate;
            that.addModel(data);
          } else if (that.operationType == 1) {
            // 查看
          } else if (that.operationType == 2) {
            // 编辑
            data = Object.assign({}, that.fromDataRender);
            delete data.updateDate;
            delete data.createDate;
            that.updateModel(data);
          }
        } else {
          return false;
        }
      });
    },

    // 图片选中
    selectedMark(item) {
      if (this.edit) {
        this.fromDataRender.iconUrl =
          systemConfig.iconPrefix + item.iconUuidName;
        this.iconList = this.iconList.map(function (imgItem) {
          imgItem.active = false;
          if (imgItem.id == item.id) {
            imgItem.active = true;
          }
          return imgItem;
        });
      }
    },

    // 创建
    addModel(data) {
      let that = this;
      // 上传loading
      const loading = this.$createLoading("图层新增中，请勿刷新！");
      api
        .addModel(data)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.$message({
              type: "success",
              message: "图层增加成功！",
            });
            that.updateData();
            that.dialogBeforeClose();
          } else {
            loading.close();
            that.$checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },
    // 更新
    updateModel(data) {
      let that = this;
      // 上传loading
      const loading = this.$createLoading("图层更新中，请勿刷新！");
      api
        .updateModel(data)
        .then((result) => {
          loading.close();
          if (result.code == 200) {
            that.$message({
              type: "success",
              message: "图层更新成功！",
            });
            that.updateData();
            that.dialogBeforeClose();
          } else {
            that.$checkRequestCode(result);
          }
        })
        .catch((err) => {
          loading.close();
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 创建数据集窗口关闭前
    dialogBeforeClose() {
      this.fromDataRender = {
        alpha: "",
        content: "",
        createDate: "",
        fillColor: "#FF0000",
        geometryType: "Point",
        iconUrl: "",
        id: "",
        jsonStr: "",
        lineWidth: "",
        tableName: "",
        threeId: "",
        title: "",
        type: 0,
        updateDate: "",
      };
      this.beforeClose();
      this.iconList.map(function (item) {
        item.active = false;
        return item;
      });
      this.$refs.modelDetail_form.clearValidate();
    },
  },
  computed: {
    layerData() {
      return this.$store.state.layerList;
    },
    iconData() {
      return this.$store.state.iconList;
    },
  },
  watch: {
    formData(newVal) {
      let that = this;
      if (newVal) {
        this.fromDataRender = newVal;
        this.pointToImg = setInterval(() => {
          that.iconList = that.iconList.map(function (item) {
            if (that.fromDataRender.iconUrl.indexOf(item.iconName) > -1) {
              item.active = true;
            }
            if (that.fromDataRender.iconUrl.indexOf(item.iconUuidName) > -1) {
              item.active = true;
            }
            return item;
          });
          clearInterval(that.pointToImg);
        }, 100);
      }
    },
    layerData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) {
          this.layerList = newVal;
        }
      },
    },
    iconData: {
      immediate: true,
      handler(newVal, oldName) {
        if (newVal) {
          this.iconList = newVal.map(function (obj) {
            obj.active = false;
            return obj;
          });
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
.modelDetailDialog {
  /deep/ .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 15px;
  }

  .title {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
  }

  /deep/ .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  /deep/ .el-dialog__footer {
    border-top: 1px solid #eeeeee;
    padding: 10px 20px;
  }

  .el-form-item {
    /deep/ .el-form-item__label {
      width: 100px !important;
    }

    /deep/ .el-form-item__content {
      margin-left: 100px !important;
      line-height: inherit;
    }
  }

  .el-row.second_title {
    line-height: 40px;
    text-indent: 20px;
    font-size: 18px;
  }

  .picture_store {
    height: 160px;
    border: 1px solid #eeeeee;
    padding: 5px 10px;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: 20px;

    ul {
      overflow: hidden;
    }

    li {
      float: left;
      width: 60px;
      height: 60px;
      margin: 5px 8px;
      padding-bottom: 20px;
      border: 2px solid transparent;
      position: relative;
      cursor: pointer;
      img {
        width: 60px;
        height: 60px;
        padding: 5px 0px;
      }

      div {
        position: absolute;
        bottom: -10px;
        width: 100%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &.active img {
        border: 2px solid #eeeeee;
      }
    }
  }
}
</style>