ibms/src/views/data_admin/buildGraphy/lib/formInput.vue

<!--
A1	手工填写-单个-数字-无单位
A2	手工填写-单个-数字-有单位
A3	手工填写-多个-数字-无单位
A4	手工填写-多个-数字-有单位
A5	手工填写-单个-数字范围-无单位
A6	手工填写-单个-数字范围-有单位
A7	手工填写-多个-数字范围-无单位
A8	手工填写-多个-数字范围-有单位
B1	手工填写-单个-文本
B2	手工填写-多个-文本
C1	手工填写-单个-日期时间值
C2	手工填写-单个-日期时间段
C3	手工填写-多个-日期时间值
C4	手工填写-多个-日期时间段
C5	手工填写-单个-日期值
C6	手工填写-单个-日期段
C7	手工填写-多个-日期值
C8	手工填写-多个-日期段
C9	手工填写-单个-时间值
C10	手工填写-单个-时间段
C11	手工填写-多个-时间值
C12	手工填写-多个-时间段
D1	字典选择-单个-单选
D2	字典选择-单个-多选
D3	字典选择-多个-单选
D4	字典选择-多个-多选
E1	字典布尔选择-单个
E2	字典布尔选择-多个
F1	上传-单个文件 -->

<template>
  <el-form
    :label-position="'right'"
    :labelWidth="width + 'px'"
    :model="formLabelAlign"
    ref="form"
    @submit.native.prevent
  >
    <el-form-item :label="label" :rules="isRule ? { required: true, message: '不能为空'} : {}">
      <!-- 普通输入类型 -->
      <el-input
        size="small"
        v-if="!isShow && (type == 'default' || type == 'B1')"
        v-model="formLabelAlign.name"
        style="width: 9rem;"
        @change="onSubmit"
        @keyup.enter.native="onSubmit"
      >
        <template slot="append" v-if="unit">{{unit}}</template>
      </el-input>
      <el-input
        type="number"
        v-if="!isShow && (type == 'A1' || type == 'A2')"
        v-model="formLabelAlign.name"
        style="width: 9rem;"
        @change="onSubmit"
        @keyup.enter.native="onSubmit"
      >
        <template slot="append" v-if="unit">{{unit}}</template>
      </el-input>
      <!-- date类型 -->
      <el-date-picker
        v-if="!isShow && (type == 'year' || type == 'C5')"
        v-model="formLabelAlign.name"
        type="date"
        value-format="yyyy-MM-dd"
        @change="onSubmit"
        :clearable="false"
        placeholder="选择日期"
      ></el-date-picker>
      <!-- 级联选择 -->
      <el-cascader
        v-if="!isShow && (type == 'cascader' || type == 'D1')"
        :options="typeArr"
        v-model="formLabelAlign.name"
        @change="onSubmit"
        :props="props"
      ></el-cascader>
      <!-- 日期到分 -->
      <el-date-picker
        v-if="!isShow && type == 'C1'"
        v-model="formLabelAlign.name"
        type="datetime"
        value-format="yyyy-MM-dd HH:MM"
        @change="onSubmit"
        :clearable="false"
        placeholder="选择日期"
      ></el-date-picker>
      <!-- 输入文本框 -->
      <el-input
        v-if="!isShow && type == 'B2'"
        type="textarea"
        :rows="2"
        @change="onSubmit"
        @keyup.enter.native="onSubmit"
        placeholder="请输入内容"
        v-model="formLabelAlign.name"
      ></el-input>
      <!-- 日期 -->
      <el-date-picker
        v-if="!isShow && type == 'C6'"
        v-model="formLabelAlign.name"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:MM"
        @change="onSubmit"
        :clearable="false"
        placeholder="选择日期"
      ></el-date-picker>
      <!-- 点击确定 -->
      <i
        v-if="!isShow  && (type == 'default' || type == 'B1')"
        class="el-input__icon el-icon-check hover"
        @click="onSubmit"
      ></i>
      <!-- 显示基本内容 -->
      <span v-if="isShow" @click="changeItem" class="hover">
        {{ filterArr(formLabelAlign.name) }} {{unit}}
        <i class="el-icon-edit" v-if="type != 'X'"></i>
      </span>
      <slot name="mess"></slot>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "ownerInput",
  props: {
    type: {
      type: String,
      default: "default"
    }, //类型
    value: [String, Number, Array], //value值
    label: String, //label值，从父级传入
    isRule: Boolean, //是否需要规则
    keys: [String, Number], //
    typeArr: [Array, String], //当其为级联或者下拉时传入
    unit: {
      //单位
      type: String,
      default: ""
    },
    width: {
      type: Number,
      default: 100
    }
  },

  data() {
    return {
      formLabelAlign: {
        name: ""
      },
      key: "",
      isShow: true,
      props: {
        label: "name",
        value: "code",
        children: "content"
      } //修改默认数据格式
    };
  },

  methods: {
    //点击确定或者url
    onSubmit() {
      if (this.formLabelAlign.name == "" || this.formLabelAlign.name == []) {
        this.$message.error("请确定值不为空");
      } else {
        this.isShow = true;
        if (this.type == 'cascader' || this.type == 'D1') {
          let data = this.formLabelAlign.name
          this.$emit("change", data[data.length - 1], this.keys);
        } else {
          this.$emit("change", this.formLabelAlign.name, this.keys);
        }
      }
    },

    //点击文案出现输入
    changeItem() {
      if (this.type == "X") {
        this.$message('该信息点不支持编辑')
        return;
      } else {
        this.isShow = false;
      }
    },

    //对数组中的空数组去除
    toMyNeed(arr) {
      return arr.map(res => {
        let param = {};
        if (res.content && res.content.length != 0) {
          param.content = this.toMyNeed(res.content);
        }
        param.name = res.name;
        param.code = res.code;
        return param;
      });
    },

    //获取级联选中的值
    getCascaderObj(val, opt) {
      let data = this.getMyVal(val, opt, 'name')
      data.length > 1 ? data = data.join('/') : data = data.join('')
      return data
    },

    getMyVal(val, content, code) {
      let data = []
      if (content && content.length) {
        for (let i = 0; i < content.length; i++) {
          if (content[i].code == val) {
            data.push(content[i][code])
            break
          } else {
            if (content[i].content && content.length) {
              for (let j = 0; j < content[i].content.length; j++) {
                if (content[i].content[j].code == val) {
                  data.push(content[i][code])
                  data.push(content[i].content[j][code])
                  break
                } else {
                  if (content[i].content[j].content && content[i].content[j].content.length) {
                    for (let k = 0; k < content[i].content[j].content.length; k++) {
                      if (content[i].content[j].content[k].code == val) {
                        data.push(content[i][code])
                        data.push(content[i].content[j][code])
                        data.push(content[i].content[j].content[k][code])
                        break
                      } else {
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      if (!data.length) {
        data = null
      }
      return data
    },

    getMap(val, opt) {
      return opt.map(function (value, index, array) {
        for (var itm of opt) {
          if (itm.code == value.code) {
            opt = itm.content;
            return itm;
          }
        }
        return null;
      });
    },

    //数组过滤
    filterArr(val) {
      let value = ""; //最后输出的文案
      let isNeedType = this.type == 'cascader' || this.type == 'D1'
      if (this.type == 'C6') {
        value = value != "" ? val[0] + '至' + val[1] : "--"
      } else if (this.type == 'cascader' || this.type == 'D1') {
        if (val && val.length) {
          value = this.getCascaderObj(val[val.length - 1], this.typeArr, 'name') || "--";
        }
      } else {
        value = val || "--";
      }
      return value;
    }
  },

  created() {
    if (typeof (this.typeArr) == Object) {
      this.typeArr = this.toMyNeed(this.typeArr)
    }
    if (this.type == 'cascader' || this.type == 'D1') {
      if (this.value == '' || this.value == undefined) {
        this.formLabelAlign.name = []
      } else {
        this.formLabelAlign.name = this.getMyVal(this.value, this.typeArr, 'code');
      }
    } else {
      this.formLabelAlign.name = this.value;
    }
    this.key = this.label;
  },

  watch: {
    label() { }
  }
};
</script>

<style lang="less">
.hover:hover {
  cursor: pointer;
  color: #409eff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style>