WidgetConfig.vue

<template>
  <div class="widget-config">
    <el-form
      label-suffix="："
      v-if="this.data && Object.keys(this.data).length > 0"
      labelPosition="left"
      labelWidth="110px"
      size="small"
    >
      <el-collapse v-model="collapse">
        <el-collapse-item name="1" title="基本属性">
          <el-form-item label="类型" v-if="data.type && !data.component">
            <el-select
              v-model="data.type"
              style="width: 100%"
              placeholder="请选择类型"
              @change="handleChangeType"
            >
              <el-option-group
                v-for="group in fieldList"
                :key="group.title"
                :label="group.title"
              >
                <el-option
                  v-for="item in group.list"
                  :key="item.type"
                  :label="item.label"
                  :disabled="item.disabled"
                  :value="item.type"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="属性值">
            <el-input
              v-model="data.prop"
              clearable
              placeholder="属性值"
              :disabled="propNotEdit"
            ></el-input>
          </el-form-item>
          <el-form-item label="标题">
            <el-input
              v-model="data.label"
              clearable
              placeholder="标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="标题前缀">
            <el-input
              v-model="data.labelSuffix"
              placeholder="标题前缀"
            ></el-input>
          </el-form-item>
          <el-form-item label="左侧内边距" v-if="data.type === 'group'">
            <el-input-number
              style="width: 100%"
              v-model="data.labelWidth"
              controls-position="right"
              placeholder="左侧内边距"
              :min="0"
              :max="400"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="左边外边距" v-else>
            <el-input
              v-model="data.styles.marginLeft"
              clearable
              placeholder="距左边边距"
            ></el-input>
          </el-form-item>
          <el-form-item label="标题宽度" v-if="data.type !== 'group'">
            <el-input-number
              style="width: 100%"
              v-model="data.labelWidth"
              controls-position="right"
              placeholder="标题宽度"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <template
            v-if="
              !['group', 'dynamic'].includes(data.type) &&
              data.cType !== 'table'
            "
          >
            <el-form-item label="表单栅格">
              <el-input-number
                style="width: 100%"
                v-model="data.span"
                controls-position="right"
                placeholder="表单栅格默认12（≥1720px）"
                :min="0"
                :max="24"
              ></el-input-number>
            </el-form-item>

            <el-form-item label="内容宽度">
              <el-input-number
                style="width: 100%"
                v-model="data.width"
                controls-position="right"
                placeholder="默认24（≥1720px）"
                :min="0"
                :max="24"
              ></el-input-number>
            </el-form-item>

            <el-form-item label="xs表单栅格">
              <el-input-number
                style="width: 100%"
                v-model="data.xs"
                controls-position="right"
                placeholder="xs默认24（<768）"
                :min="0"
                :max="24"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="sm表单栅格">
              <el-input-number
                style="width: 100%"
                v-model="data.sm"
                controls-position="right"
                placeholder="sm默认24（≥768px）"
                :min="0"
                :max="24"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="md表单栅格">
              <el-input-number
                style="width: 100%"
                v-model="data.md"
                controls-position="right"
                placeholder="md默认24（≥992px）"
                :min="0"
                :max="24"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="lg表单栅格">
              <el-input-number
                style="width: 100%"
                v-model="data.lg"
                controls-position="right"
                placeholder="lg默认追随表单栅格（≥1200px）"
                :min="0"
                :max="24"
              ></el-input-number>
            </el-form-item>
          </template>
          <el-form-item label="宽度" v-if="data.cType === 'table'">
            <el-input-number
              style="width: 100%"
              v-model="data.width"
              controls-position="right"
              placeholder="表格宽度"
              :min="100"
              :max="800"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="关联子表单"
            v-if="!['group', 'dynamic'].includes(data.type)"
          >
            <el-input
              v-model="data.relSubForm"
              clearable
              placeholder="填写子表单属性值"
            ></el-input>
          </el-form-item>
          <el-form-item label="自动采集完整度" labelWidth="130px">
            <el-switch
              v-model="data.autoRequired"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
          <el-form-item label="人工补录完整度" labelWidth="130px">
            <el-switch
              v-model="data.personalRequired"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
          <el-form-item label="重要字段" labelWidth="130px">
            <el-switch v-model="data.importantField"></el-switch>
          </el-form-item>
          <el-form-item
            label="重要字段说明"
            labelWidth="130px"
            v-if="
              data.importantField && !['group', 'dynamic'].includes(data.type)
            "
          >
            <el-input clearable v-model="data.importantFieldDesc"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="数据类型"
            v-if="
              [
                'cascader',
                'checkbox',
                'radio',
                'select',
                'tree',
                'upload',
                'img',
                'array',
                'slider',
                'timerange',
                'daterange',
                'datetimerange',
              ].includes(data.type)
            "
          >
            <template slot="label">
              <el-link
                :underline="false"
                href="https://avuejs.com/doc/dataType"
                target="_blank"
                >数据类型 <i class="el-icon-question"></i
              ></el-link>
            </template>
            <el-select
              v-model="data.dataType"
              placeholder="数据类型"
              clearable
              style="width: 100%"
            >
              <el-option label="String" value="string"></el-option>
              <el-option label="Number" value="number"></el-option>
              <el-option label="Array" value="array"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="深结构" v-if="data.type && !data.component">
            <template slot="label">
              <el-link
                :underline="false"
                href="https://avuejs.com/doc/form/form-bind"
                target="_blank"
                >深结构 <i class="el-icon-question"></i
              ></el-link>
            </template>
            <el-input
              v-model="data.bind"
              clearable
              placeholder="深结构"
            ></el-input>
          </el-form-item>
          <el-form-item label="字段提示">
            <template slot="label">
              <el-link
                :underline="false"
                href="https://avuejs.com/doc/form/form-tip"
                target="_blank"
                >字段提示 <i class="el-icon-question"></i
              ></el-link>
            </template>
            <el-input
              v-model="data.tip"
              clearable
              placeholder="字段提示"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="data.tip && !['upload'].includes(data.type)"
            label="字段提示位置"
            label-width="110px"
          >
            <el-select
              v-model="data.tipPlacement"
              placeholder="字段提示位置"
              style="width: 100%"
              clearable
            >
              <el-option label="上" value="top"></el-option>
              <el-option label="下" value="bottom"></el-option>
              <el-option label="左" value="left"></el-option>
              <el-option label="右" value="right"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题提示">
            <template slot="label">
              <el-link
                :underline="false"
                href="https://avuejs.com/doc/form/form-tip"
                target="_blank"
                >标题提示 <i class="el-icon-question"></i
              ></el-link>
            </template>
            <el-input
              v-model="data.labelTip"
              clearable
              placeholder="标题提示"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="data.labelTip && !['upload'].includes(data.type)"
            label="标题提示位置"
            label-width="110px"
          >
            <el-select
              v-model="data.labelTipPlacement"
              placeholder="标题提示位置"
              clearable
            >
              <el-option label="上" value="top"></el-option>
              <el-option label="下" value="bottom"></el-option>
              <el-option label="左" value="left"></el-option>
              <el-option label="右" value="right"></el-option>
            </el-select>
          </el-form-item> -->
          <component :is="getComponent" :data="data"></component>
        </el-collapse-item>
        <!-- <el-collapse-item
          name="2"
          title="事件属性"
          v-if="!['group', 'dynamic'].includes(data.type)"
        >
          <el-form-item label="change">
            <el-input
              v-model="data.change"
              type="textarea"
              placeholder="改变事件"
              rows="5"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="click">
            <el-input
              v-model="data.click"
              type="textarea"
              placeholder="点击事件"
              rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="focus">
            <el-input
              v-model="data.focus"
              type="textarea"
              placeholder="获取焦点事件"
              rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="blur">
            <el-input
              v-model="data.blur"
              type="textarea"
              placeholder="失去焦点事件"
              rows="5"
            ></el-input>
          </el-form-item>
        </el-collapse-item> -->

        <slot name="dbtable"></slot>

        <el-collapse-item
          name="99"
          title="其他"
          v-if="!['group', 'dynamic', 'title'].includes(data.type)"
        >
          <el-form-item label="计算规则">
            <el-input
              v-model.trim="data.algorithm"
              type="textarea"
              clearable
              placeholder="计算规则"
            ></el-input>
          </el-form-item>
          <dynamic-sh :data="data"></dynamic-sh>
          <el-form-item label="首次不触发" labelWidth="130px">
            <el-switch v-model="data.noImmediate"></el-switch>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import fields from "./fieldsConfig.js"
import DynamicSh from "./components/DynamicSh"
const dateArr = [
  "year",
  "month",
  "week",
  "date",
  "datetime",
  "time",
  "daterange",
  "timerange",
  "datetimerange",
  "dates",
]

export default {
  name: "widget-config",
  components: { DynamicSh },
  props: {
    data: {
      type: Array | Object,
    },
    fieldNotEdit: {
      type: Boolean,
      default: false,
    },
    propNotEdit: {
      type: Boolean,
      default: false,
    },
    layoutHidden: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    getComponent() {
      const prefix = "config-"
      const { type, component } = this.data
      if ((!type || component) && type != "ueditor") return prefix + "custom"
      let result = "input"

      if (
        [
          undefined,
          "input",
          "password",
          "url",
          "dental-tab",
          "dental-tab-tj",
        ].includes(type)
      )
        result = "input"
      else if (dateArr.includes(type)) result = "date"
      else if (["array", "img"].includes(type)) result = "array"
      else if (["tree", "cascader"].includes(type)) result = "tree"
      else if (["radio", "checkbox", "select"].includes(type)) result = "select"
      else result = type

      return prefix + result
    },
    fieldList() {
      return this.layoutHidden ? fields.slice(1) : fields
    },
  },
  data() {
    return {
      fields,
      collapse: "1",
    }
  },
  watch: {
    "data.styles": {
      handler(val) {
        if (!val) {
          this.$set(this.data, "styles", {})
        }
      },
      immediate: true,
    },
  },
  methods: {
    async handleChangeType(type) {
      if (type) {
        const { prop, children } = this.data
        const config = await this.getConfigByType(type)
        config.prop = prop
        for (let key in config) {
          if (
            config &&
            Object.prototype.hasOwnProperty.call(config, key) &&
            !["icon", "label", "span"].includes(key)
          ) {
            const val = config[key]
            // 分组和子表单中的数据项转换
            if (
              key === "children" &&
              children &&
              children.column.length > 0 &&
              Object.prototype.hasOwnProperty.call(val, "column")
            ) {
              val.column = this.deepClone(children.column)
            }
            this.$set(this.data, key, val)
          }
        }
        this.$set(this.data, "importantField", true)
        this.$set(this.data, "dicType", "")
        this.$emit("change")
      }
    },
    getConfigByType(type) {
      return new Promise((resolve, reject) => {
        fields.forEach((field) => {
          field.list.forEach((config) => {
            if (config.type == type) resolve(config)
          })
        })
        reject()
      })
    },
  },
}
</script>
<style lang="scss">
.widget-config {
  ul {
    margin: 0;
    padding: 0;

    li {
      display: flex;
      align-items: center;
      width: 100%;

      .ghost {
        list-style: none;
        font-size: 0;
        height: 35px;
      }
    }
  }
}
</style>