web-details/src/components/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	字典选择-单个-单选
D1L 字典选择-单个-单选(级联)
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 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' || type == 'D1L')"
            :options="typeArr"
            :show-all-levels="false"
            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="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @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="editShow(type)"></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, Array, Number], //value值
    label: String, //label值，从父级传入
    isRule: Boolean, //是否需要规则
    keys: String, //
    myArr: [Array, String], //当其为级联或者下拉时传入
    unit: {
      //单位
      type: String,
      default: ""
    },
    width: {
      type: Number,
      default: 150
    }
  },

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

  methods: {
    //点击确定或者url
    onSubmit() {
      if (this.formLabelAlign.name == "" || this.formLabelAlign.name == []) {
        this.$message.error("请确定值不为空");
      } else {
        this.isShow = true;
        if (this.type == "cascader" || this.type == "D1" || this.type == "D1L") {
          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.type == "L" ||
        this.type == "N2" ||
        this.type == "F2" ||
        this.type == 'M'
      ) {
        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" || this.type == "D1L";
      if (this.type == "C6") {
        if (val instanceof Array) {
          value = val[0] + "至" + val[1];
        } else {
          value = "--";
        }
      } else if (this.type == "cascader" || this.type == "D1" || this.type == "D1L") {
        if (val && val.length) {
          value =
            this.getCascaderObj(val[val.length - 1], this.typeArr, "name") ||
            "--";
        }
      } else {
        value = val || "--";
      }
      return value;
    },

    changeArray(arr) {
      return arr.map(item => {
        if (!!item.Content && item.Content.length) {
          return {
            code: item.Code,
            name: item.Name,
            content: this.changeArray(item.Content)
          };
        } else {
          return {
            code: item.Code,
            name: item.Name,
            content: null
          };
        }
      });
    },

    editShow(type) {
      if (type == "X" || type == "L" || type == "N2" || type == "F2" || type == 'M' ) {
        return false;
      } else {
        return true;
      }
    },

    formatDataSource(data) {
      let options
      let arr = []
      try {
        options = JSON.parse(data)
        if (options) {
          if (options instanceof Array) {
            this.typeArr = this.changeArray(options);
          }
          if (typeof this.typeArr == Object) {
            this.typeArr = this.toMyNeed(this.typeArr);
          }
        } else {
          this.typeArr = arr
        }
      } catch (err) {
        this.typeArr = arr
      }
    }
  },

  created() {
    console.log(this.type)
    // if (this.myArr instanceof Array) {
    //   this.typeArr = this.changeArray(this.myArr);
    // }
    // if (typeof this.typeArr == Object) {
    //   this.typeArr = this.toMyNeed(this.typeArr);
    // }
    this.formatDataSource(this.myArr)
    if (this.type == "cascader" || this.type == "D1" || this.type == "D1L") {
      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>