adm-front/src/components/ready/buildfloor/formItems.vue

<template>
  <div id="inforsPoint">
    <el-form
      ref="ruleForm"
      :model="form"
      label-width="150px"
      :rules="rules"
      :inline="true"
      :label-position="'right'"
    >
      <div
        v-for="item in InforsList"
        :key="item.infoPointCode"
        style="width: 50%; display: inline-block"
      >
        <el-form-item
          :label="item.name"
          :prop="item.code"
          v-if="all || item.visible"
          :class="{ FloorTypeSelect: item.dataType == 'ENUM' || item.unit }"
        >
          <el-input
            v-model.trim="form[item.path]"
            v-if="
              item.infoPointCode == 'bimLocation' ||
                item.infoPointCode == 'modelId'
            "
            disabled
          />

          <!--二维码相关-->
          <span v-else-if="item.infoPointCode == 'DefaultQRCode'">
            <el-input
              v-if="!form[item.path]"
              v-model.trim="form[item.path]"
              disabled
            />
            <el-popover v-else placement="right" width="210" trigger="click">
              <div style="overflow: hidden">
                <img
                  style="width: 200px; height: 200px"
                  :src="
                    '/image-service/common/file_get/' +
                      form[item.path] +
                      '?systemId=dataPlatform'
                  "
                  alt="二维码"
                />
              </div>
              <el-button slot="reference" type="text">点击查看</el-button>
            </el-popover>
          </span>

          <span v-else-if="item.infoPointCode == 'QRCodePic'">
            <el-input
              v-if="!form[item.path]"
              v-model.trim="form[item.path]"
              disabled
            />
            <el-popover v-else placement="right" width="210" trigger="click">
              <div style="overflow: hidden">
                <img
                  style="width: 200px; height: 200px"
                  :src="
                    '/image-service/common/file_get/' +
                      form[item.path] +
                      '?systemId=dataPlatform'
                  "
                  alt="二维码"
                />
              </div>
              <el-button slot="reference" type="text">点击查看</el-button>
            </el-popover>
          </span>

          <!--/二维码相关-->
          <span v-else-if="item.dataType == 'STRING'">
            <el-input
              v-model.trim="form[item.path]"
              :disabled="!item.editable"
              :placeholder="
                item.dataType == 'STRING' && item.path === 'localId'
                  ? '填写示例：F1、B1？'
                  : ''
              "
            />
            <div
              v-if="
                item.dataType == 'STRING' &&
                  item.path === 'localId' &&
                  isShowTitle
              "
              style="color: gray; font-size: 12px"
            >
              用于楼层平面图切换
            </div>
          </span>

          <el-input-number
            v-model.trim="form[item.path]"
            :controls="false"
            style="text-align: right;"
            v-else-if="item.dataType == 'INTEGER' || item.dataType == 'DOUBLE'"
          >
            <template slot="append" v-if="item.unit">{{ item.unit }}</template>
          </el-input-number>

          <el-select
            v-model="form[item.path]"
            placeholder="请选择"
            v-else-if="item.dataType == 'ENUM' || item.dataType == 'BOOLEAN'"
          >
            <el-option
              v-for="op in item.options"
              :key="op.code"
              :label="op.name"
              :value="op.code"
            ></el-option>
          </el-select>
          <el-input
            v-model.trim="form[item.path]"
            v-else
            :disabled="!item.editable"
            :placeholder="item.dataType ? '' : '字典无输入类型'"
          ></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getDataDictionary } from "@/api/dict";
import rules from "../../../api/fm/rules";

export default {
  props: {
    type: {
      default: "floor"
    }
  },
  data() {
    let validateId = (rule, value, callback) => {
      console.log("localId", rule, value, callback);
      if (!value) {
        this.isShowTitle = false;
        return callback(new Error("请输入楼层本地编码"));
      } else {
        this.isShowTitle = true;
        callback();
      }
    };
    return {
      form: {},
      isShowTitle: true,
      InforsList: [],
      all: true, // 默认显示全部
      rules: {
        localId: [{ validator: validateId, trigger: "blur", required: true }],
        localName: [
          { required: true, message: "请输入楼层本地名称", trigger: "blur" }
        ],
        floorSequenceID: [
          { required: true, message: "请输入楼层顺序号", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.getInforsPoint();
  },
  methods: {
    getInforsPoint() {
      let params = {
        type: this.type,
        // orders: "sort asc,infoPointCode asc",
        pageNumber: 1,
        pageSize: 1000,
        orders: "sort asc, name desc"
      };
      getDataDictionary(params, res => {
        let arr = res.content
          .map(item => {
            const category = ["ENUM", "MENUM", "BOOLEAN"];
            if (
              item.category == "STATIC" &&
              category.includes(item.dataType) &&
              item.dataSource
            ) {
              item.options = item.dataSource;
              if (item.options[0]) {
                item.props = {
                  value: "code",
                  label: "name",
                  children: "content",
                  checkStrictly: true
                };
              }
            }
            switch (
              item.code //过滤掉待删除的
            ) {
              case "floorIdentity":
              case "relatedSchedule":
              case "outPeopleFlow":
              case "inPeopleFlow":
              case "exsitPeopleNum":
                break;
              default:
                return item;
            }
          })
          .filter(_c => {
            return !!_c;
          });
        this.InforsList = arr;
      });
    },
    submitForm(call) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          call();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#inforsPoint {
  .el-form-item {
    /deep/ label.el-form-item__label {
      font-size: 12px;
    }
  }
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

  /deep/ .FloorTypeSelect .el-form-item__content {
    width: 200px;
  }

  /deep/ .el-input--small {
    width: 200px;
  }
}
</style>