doway-coms 2.1.2 → 2.1.3

package/packages/BaseForm/src/index.vue

@@ -1,727 +1,727 @@
-<template>
-  <div class="d-form-items">
-    <!-- <div @click="hiddenDetail = !hiddenDetail">展开</div> -->
-    <div
-      class="d-form-item"
-      v-for="col in internalComputedHiddenCols"
-      :key="col.field"
-      v-show="hiddenDetail ? colIndex === 0 : true"
-    >
-      <!-- 文本框输入控件 -->
-      <BaseInput
-        v-if="
-          col.controlType === 'text' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :rules="col.rules"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-        @blur="
-          () => {
-            blurChange(col)
-          }
-        "
-      />
-      <!-- 按钮弹出框输入控件 -->
-      <!-- isButtonShow字段是额外添加字段，用于控制区分输入框控件 -->
-      <BaseButton
-        v-if="col.isButtonShow == true"
-        v-model="row[col.field]"
-        :colInfo="col"
-        :row="row"
-        :formRow="formRow"
-        @preSearch="preSearch"
-        @handleOk="
-          (value) => {
-            buttonHandleOk(col, value)
-          }
-        "
-      />
-      <!-- 文本框输入控件 -->
-      <BaseTextArea
-        v-if="
-          col.controlType === 'textarea' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :rules="col.rules"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-      <!-- 数字输入 -->
-      <BaseNumberInput
-        v-if="
-          col.controlType === 'number' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :rules="col.rules"
-        :min="col.min"
-        :tooltip="col.tooltip"
-        :max="col.max"
-        :precision="col.precision"
-        :percent="col.percent"
-        @change="
-          () => {
-            numberChange(col)
-          }
-        "
-        @blur="
-          () => {
-            blurChange(col)
-          }
-        "
-      />
-      <BaseIntervalInput
-        v-if="
-          col.controlType === 'interval' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :rules="col.rules"
-        :tooltip="col.tooltip"
-        :displayType="col.displayType"
-        :valueType="col.valueType"
-        @change="
-          () => {
-            numberChange(col)
-          }
-        "
-      />
-      <!-- 日期选择控件 -->
-      <BaseDate
-        v-if="
-          col.controlType === 'date' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :pastDate="col.pastDate"
-        :rules="col.rules"
-        :disabledDateValue="col.disabledDateValue"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-      <!-- 日期时间控件 -->
-      <BaseDatetime
-        v-if="
-          col.controlType === 'datetime' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :pastDate="col.pastDate"
-        :tooltip="col.tooltip"
-        :edit="col.edit"
-        :rules="col.rules"
-        :disabledDateValue="col.disabledDateValue"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-      <!-- 单选框 -->
-      <BaseCheckbox
-        v-if="
-          col.controlType === 'checkbox' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :rules="col.rules"
-        @change="
-          (rowInfo) => {
-            checkboxChange(col)
-          }
-        "
-      />
-      <BaseTime
-        v-if="
-          col.controlType === 'time' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :tooltip="col.tooltip"
-        :edit="col.edit"
-        :rules="col.rules"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-      <BaseDateWeek
-        v-if="
-          col.controlType === 'dateweek' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :rules="col.rules"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-      <BaseDateMonth
-        v-if="
-          col.controlType === 'datemonth' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :rules="col.rules"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-      <BaseSelect
-        v-if="
-          col.controlType === 'select' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :rules="col.rules"
-        :tooltip="col.tooltip"
-        :dataSource="col.dataSource"
-        @change="
-          (rowInfo) => {
-            selectChange(col)
-          }
-        "
-      />
-      <BaseSelectMulti
-        v-if="
-          col.controlType === 'dropmulti' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :label="col.title"
-        v-model="row[col.field]"
-        :edit="col.edit"
-        :tooltip="col.tooltip"
-        :rules="col.rules"
-        @change="
-          (rowInfo) => {
-            selectMultiChange(col)
-          }
-        "
-        :dataSource="col.dataSource"
-      />
-      <BasePulldown
-        v-if="
-          col.controlType === 'pulldown' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :formRow="formRow"
-        :isOld="isOld"
-        :edit="col.edit"
-        :defaultExpression="col.defaultExpression"
-        :row="row"
-        :api="col.api"
-        :tooltip="col.tooltip"
-        :optBtns="col.optBtns"
-        :popupAddName="col.popupAddName"
-        :popupAddPath="col.popupAddPath"
-        @pulldownBtnClick="pulldownBtnClick"
-        :label="col.title"
-        :rules="col.rules"
-        :route="col.route"
-        v-model="row[col.field]"
-        :field="col.field"
-        :columns="col.columns"
-        :pageSize="col.pageSize"
-        :immediate="col.immediate"
-        :allowAutoClear="col.allowAutoClear"
-        @preSearch="preSearch"
-        @selectChanged="
-          (rowInfo) => {
-            pullDownChange(col, rowInfo)
-          }
-        "
-      />
-      <BaseTreeSelect
-        v-if="
-          col.controlType === 'treeSelect' &&
-          (col.isButtonShow == false || col.isButtonShow == undefined)
-        "
-        :formRow="formRow"
-        :api="col.api"
-        :tooltip="col.tooltip"
-        :row="row"
-        :edit="col.edit"
-        :label="col.title"
-        :rules="col.rules"
-        :route="col.route"
-        :field="col.field"
-        :columns="col.columns"
-        @preSearch="preSearch"
-        :replaceFields="col.replaceFields"
-        :treeWidth="col.treeWidth"
-        :width="col.width"
-        :linkedField="col.linkedField"
-        :showSearch="col.showSearch"
-        :allowClear="col.allowClear"
-        :placeholder="col.placeholder"
-        :linkedTitle="col.linkedTitle"
-        :method="col.method"
-        v-model="row[col.field]"
-        @change="
-          () => {
-            inputChange(col)
-          }
-        "
-      />
-    </div>
-    <div class="d-form-item-ghost"></div>
-    <div class="d-form-item-ghost"></div>
-    <div class="d-form-item-ghost"></div>
-    <div class="d-form-item-ghost"></div>
-  </div>
-</template>
-
-<script>
-import { sysFormState, sysRowState } from '../../utils/enum'
-import BaseInput from '../../BaseInput/index'
-import BaseCheckbox from '../../BaseCheckbox/index'
-import BaseDate from '../../BaseDate/index'
-import BaseDatetime from '../../BaseDatetime/index'
-import BaseDateWeek from '../../BaseDateWeek/index'
-import BaseTextArea from '../../BaseTextArea/index'
-import BaseButton from '../../BaseButton/index'
-import BaseSelect from '../../BaseSelect/index'
-import BaseSelectMulti from '../../BaseSelectMulti/index'
-import BaseTime from '../../BaseTime/index'
-import BasePulldown from '../../BasePulldown/index'
-import BaseIntervalInput from '../../BaseIntervalInput/index'
-import BaseNumberInput from '../../BaseNumberInput/index'
-import BaseTreeSelect from '../../BaseTreeSelect'
-
-import moment from 'moment'
-import BaseDateMonth from '../../BaseDateMonth'
-export default {
-  components: {
-    BaseInput,
-    BaseCheckbox,
-    BaseDate,
-    BaseDatetime,
-    BaseDateWeek,
-    BaseDateMonth,
-    BaseTextArea,
-    BaseButton,
-    BaseSelect,
-    BaseSelectMulti,
-    BaseTime,
-    BasePulldown,
-    BaseIntervalInput,
-    BaseNumberInput,
-    BaseTreeSelect,
-  },
-  name: 'BaseForm',
-  props: {
-    updateDatas: {
-      // 更新的数据
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    showLoading: {
-      // 是否显示加载信息
-      type: Boolean,
-      default: false,
-    },
-    isOld: {
-      // 是否老系统
-      type: Boolean,
-      default: false,
-    },
-    valueState: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    formState: {
-      type: String,
-      default: sysFormState.view,
-    },
-    formRow: {
-      // 当前页面数据集
-      type: Object,
-      default: () => {
-        return {}
-      },
-    },
-    row: {
-      // 当前行，如果是表单的话当前行和当前页面数据集是一样的
-      type: Object,
-      default: () => {
-        return {}
-      },
-    },
-    columns: {
-      // 表格列信息
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    dataName: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-  },
-  computed: {
-    internalComputedHiddenCols: function () {
-      let vm = this
-      return this.columns.filter((item) => {
-        // if (item.isTitle === true) {
-        //   // vm.titleCol = item
-        //   return false
-        // }
-        // if (item.controlType === controlType.image) {
-        //   vm.logoCol = item
-        //   return false
-        // }
-        return item.visible === true
-      })
-    },
-  },
-  filters: {},
-  data() {
-    return {
-      hiddenDetail: false,
-      moment,
-      editFormName: '',
-      internalEdit: false,
-      internalCols: [],
-      internalValueState: {},
-      internalFormState: sysFormState.view,
-      rules: {},
-      titleCols: [],
-      logoCol: null,
-      isShowEditForm: false,
-      ref: '',
-    }
-  },
-  watch: {
-    // row: {
-    //   handler: function (newVal) {
-    //   },
-    //   deep: true
-    // },
-    // cols: {
-    //   handler: function (newVal) {
-    //     this.internalCols = newVal
-    //   },
-    //   deep: true
-    // },
-    // valueState: { // 表单值状态，更新，还是插入
-    //   handler: function (newVal) {
-    //     this.internalValueState = newVal
-    //   },
-    //   deep: true
-    // },
-    // formState: {
-    //   handler: function (newVal) {
-    //     this.internalFormState = newVal
-    //     this.setColState()
-    //   },
-    //   deep: true
-    // }
-  },
-  created() {
-    for (let i = 0; i < this.columns.length; i++) {
-      // if (this.columns[i].isLogo === true) {
-      //   this.logoCol = this.columns[i]
-      //   continue
-      // }
-      // if (this.columns[i].isTitle === true) {
-      //   this.titleCols.push(this.columns[i])
-      //   continue
-      // }
-      if (this.columns[i].controlType === 'popup') {
-        let formUrl =
-          process.env[
-            'VUE_APP_' +
-              this.columns[i].linkModuleData.objectService.toUpperCase() +
-              '_SERVICE_URL'
-          ] +
-          '/' +
-          this.columns[i].linkModuleData.objectApiVersion +
-          '/' +
-          this.columns[i].linkModuleData.objectName +
-          '/'
-        this.columns[i]['api'] = this.columns[i].linkModuleData.objectApiRoute
-          ? formUrl + this.columns[i].linkModuleData.objectApiRoute
-          : formUrl + 'Search'
-
-        this.columns[i]['columns'] = {}
-
-        for (
-          let x = 0;
-          x < this.columns[i].linkModuleData.moduleFields.length;
-          x++
-        ) {
-          let tempField = this.columns[i].linkModuleData.moduleFields[x]
-          this.columns[i]['columns'][tempField.field] = {
-            title: tempField.caption,
-            width: tempField.width,
-            visible: tempField.visible,
-            linkField: tempField.linkValueField,
-            filter: tempField.isFilter,
-          }
-          if (tempField.field === this.columns[i].linkCaptionField) {
-            this.columns[i]['columns'][tempField.field].linkField =
-              this.columns[i].field
-            this.columns[i]['columns'][tempField.field].filter = true
-          }
-        }
-      }
-
-      // this.columns[i]['rules'] = {}
-      // if (this.columns[i].isRequire === true) {
-      //   this.columns[i].rules['required'] = true
-      // }
-      // if (this.columns[i].maxLength) {
-      //   this.columns[i].rules['length'] = [0, this.columns[i].maxLength]
-      // }
-    }
-  },
-
-  mounted() {
-    //let letterLength = this.$refs.content.value
-    //letterLength = this.$refs['content'].innerText.substr(0, 6) + '...'
-    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
-  },
-  destroyed() {
-    window.removeEventListener('beforeunload', (e) =>
-      this.beforeunloadHandler(e)
-    )
-  },
-  activated() {},
-  methods: {
-    preSearch(searchInfo, repeatRowInfo) {
-      this.$emit('preSearch', searchInfo, repeatRowInfo)
-    },
-    beforeunloadHandler(e) {
-      if (this.formState !== 'view') {
-        e = e || window.event
-        e.returnValue = '提示'
-        return confirm('确认退出')
-      } else {
-        return
-      }
-    },
-    pulldownBtnClick(btnInfo) {
-      this.$emit('pulldownBtnClick', btnInfo)
-    },
-    showToolTip() {},
-    fieldCaptionClick(col) {
-      // 下拉框
-      if (
-        col.linkModuleData &&
-        col.linkModuleData.linkModuleId &&
-        col.linkModuleData.linkModuleOperate.indexOf(sysFormState.view) >= 0
-      ) {
-        // 查找模块信息
-        let linkModule = this.$store.getters.addRouters.filter((filterItem) => {
-          return (
-            filterItem.meta &&
-            filterItem.meta.moduleId === col.linkModuleData.linkModuleId
-          )
-        })
-        if (linkModule.length > 0) {
-          this.$router.pushRoute({
-            name: linkModule[0].name,
-            query: { id: this.row[col.field] },
-          })
-        }
-      }
-    },
-    // selectChange(col) {
-    //   if (col.field.indexOf('.') < 0) {
-    //     this.updateDatas[col.field] = this.row[col.field]
-    //   }
-    //   if (
-    //     this.row['sysRowState'] === sysRowState.add ||
-    //     this.row['sysRowState'] === sysRowState.update
-    //   ) {
-    //     return
-    //   }
-    //   this.row['sysRowState'] = sysRowState.update
-    // },
-    pullDownChange(colInfo, row) {
-      this.$emit('change', colInfo)
-    },
-    selectMultiChange(colInfo, row) {
-      this.$emit('change', colInfo)
-    },
-    selectChange(colInfo) {
-      this.$emit('change', colInfo)
-    },
-    checkboxChange(colInfo) {
-      this.$emit('change', colInfo)
-    },
-    checkBoxChange(col) {
-      if (col.field.indexOf('.') < 0) {
-        this.updateDatas[col.field] = this.row[col.field]
-      }
-      this.$emit('change', col)
-      if (
-        this.row['sysRowState'] === sysRowState.add ||
-        this.row['sysRowState'] === sysRowState.update
-      ) {
-        return
-      }
-      this.row['sysRowState'] = sysRowState.update
-    },
-    dateChange(col) {
-      if (col.field.indexOf('.') < 0) {
-        this.updateDatas[col.field] = this.row[col.field]
-      }
-      this.$emit('change', col)
-      if (
-        this.row['sysRowState'] === sysRowState.add ||
-        this.row['sysRowState'] === sysRowState.update
-      ) {
-        return
-      }
-      this.row['sysRowState'] = sysRowState.update
-    },
-    inputChange(colInfo) {
-      // 输入框改变
-      this.$emit('change', colInfo)
-    },
-    // 按钮弹出组件返回输入的值
-    buttonHandleOk(colInfo, value) {
-      // 按钮弹出确定改变内容改变
-      this.$emit('buttonHandleOk', colInfo, value)
-    },
-    blurChange(colInfo) {
-      // 输入框失去焦点
-      this.$emit('blur', colInfo)
-    },
-    numberChange(colInfo) {
-      // 输入框改变
-      this.$emit('change', colInfo)
-    },
-    longtimeChange(data, col) {
-      this.row[col.field] = data
-      this.$emit('change', col)
-      if (
-        this.row['sysRowState'] === sysRowState.add ||
-        this.row['sysRowState'] === sysRowState.update
-      ) {
-        return
-      }
-      this.row['sysRowState'] = sysRowState.update
-    },
-    changeControlType(field, controlType) {
-      let col = this.internalComputedHiddenCols.find(
-        (col) => col.field === field
-      )
-      col.controlType = controlType
-    },
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.form-head {
-  display: flex;
-  flex-flow: row wrap;
-  margin-bottom: 10px;
-  .form-title {
-    margin-left: 10px;
-  }
-}
-.input-span {
-  //  line-height: 33px;
-  color: #0b0b0b;
-  font-size: 12px;
-  font-weight: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
-  display: inline-block;
-  width: 100%;
-  height: 32.8px;
-  white-space: nowrap;
-  // font-family: "Arial", "Microsoft YaHei";
-}
-.title-first-input {
-  width: 200px;
-  height: 25px;
-  font-size: 15px;
-  margin-left: 10px;
-  font-weight: 500;
-}
-.title-second-input {
-  width: 200px;
-  height: 25px;
-  font-size: 15px;
-  margin-left: 10px;
-  font-weight: 500;
-}
-.title-first-value {
-  width: 200px;
-  height: 40px;
-  font-size: 24px;
-  margin-left: 10px;
-  font-weight: 700;
-}
-.title-second-value {
-  width: 200px;
-  height: 26px;
-  font-size: 18px;
-  margin-left: 10px;
-  font-weight: 600;
-}
-.option:hover {
-  background-color: #219bff;
-}
-.form {
-  margin-left: 30px;
-}
-</style>
-<style lang="less">
-@import '../../styles/default.less';
-</style>
+<template>
+  <div class="d-form-items">
+    <!-- <div @click="hiddenDetail = !hiddenDetail">展开</div> -->
+    <div
+      class="d-form-item"
+      v-for="col in internalComputedHiddenCols"
+      :key="col.field"
+      v-show="hiddenDetail ? colIndex === 0 : true"
+    >
+      <!-- 文本框输入控件 -->
+      <BaseInput
+        v-if="
+          col.controlType === 'text' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :rules="col.rules"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+        @blur="
+          () => {
+            blurChange(col)
+          }
+        "
+      />
+      <!-- 按钮弹出框输入控件 -->
+      <!-- isButtonShow字段是额外添加字段，用于控制区分输入框控件 -->
+      <BaseButton
+        v-if="col.isButtonShow == true"
+        v-model="row[col.field]"
+        :colInfo="col"
+        :row="row"
+        :formRow="formRow"
+        @preSearch="preSearch"
+        @handleOk="
+          (value) => {
+            buttonHandleOk(col, value)
+          }
+        "
+      />
+      <!-- 文本框输入控件 -->
+      <BaseTextArea
+        v-if="
+          col.controlType === 'textarea' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :rules="col.rules"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+      <!-- 数字输入 -->
+      <BaseNumberInput
+        v-if="
+          col.controlType === 'number' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :rules="col.rules"
+        :min="col.min"
+        :tooltip="col.tooltip"
+        :max="col.max"
+        :precision="col.precision"
+        :percent="col.percent"
+        @change="
+          () => {
+            numberChange(col)
+          }
+        "
+        @blur="
+          () => {
+            blurChange(col)
+          }
+        "
+      />
+      <BaseIntervalInput
+        v-if="
+          col.controlType === 'interval' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :rules="col.rules"
+        :tooltip="col.tooltip"
+        :displayType="col.displayType"
+        :valueType="col.valueType"
+        @change="
+          () => {
+            numberChange(col)
+          }
+        "
+      />
+      <!-- 日期选择控件 -->
+      <BaseDate
+        v-if="
+          col.controlType === 'date' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :pastDate="col.pastDate"
+        :rules="col.rules"
+        :disabledDateValue="col.disabledDateValue"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+      <!-- 日期时间控件 -->
+      <BaseDatetime
+        v-if="
+          col.controlType === 'datetime' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :pastDate="col.pastDate"
+        :tooltip="col.tooltip"
+        :edit="col.edit"
+        :rules="col.rules"
+        :disabledDateValue="col.disabledDateValue"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+      <!-- 单选框 -->
+      <BaseCheckbox
+        v-if="
+          col.controlType === 'checkbox' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :rules="col.rules"
+        @change="
+          (rowInfo) => {
+            checkboxChange(col)
+          }
+        "
+      />
+      <BaseTime
+        v-if="
+          col.controlType === 'time' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :tooltip="col.tooltip"
+        :edit="col.edit"
+        :rules="col.rules"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+      <BaseDateWeek
+        v-if="
+          col.controlType === 'dateweek' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :rules="col.rules"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+      <BaseDateMonth
+        v-if="
+          col.controlType === 'datemonth' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :rules="col.rules"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+      <BaseSelect
+        v-if="
+          col.controlType === 'select' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :rules="col.rules"
+        :tooltip="col.tooltip"
+        :dataSource="col.dataSource"
+        @change="
+          (rowInfo) => {
+            selectChange(col)
+          }
+        "
+      />
+      <BaseSelectMulti
+        v-if="
+          col.controlType === 'dropmulti' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :label="col.title"
+        v-model="row[col.field]"
+        :edit="col.edit"
+        :tooltip="col.tooltip"
+        :rules="col.rules"
+        @change="
+          (rowInfo) => {
+            selectMultiChange(col)
+          }
+        "
+        :dataSource="col.dataSource"
+      />
+      <BasePulldown
+        v-if="
+          col.controlType === 'pulldown' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :formRow="formRow"
+        :isOld="isOld"
+        :edit="col.edit"
+        :defaultExpression="col.defaultExpression"
+        :row="row"
+        :api="col.api"
+        :tooltip="col.tooltip"
+        :optBtns="col.optBtns"
+        :popupAddName="col.popupAddName"
+        :popupAddPath="col.popupAddPath"
+        @pulldownBtnClick="pulldownBtnClick"
+        :label="col.title"
+        :rules="col.rules"
+        :route="col.route"
+        v-model="row[col.field]"
+        :field="col.field"
+        :columns="col.columns"
+        :pageSize="col.pageSize"
+        :immediate="col.immediate"
+        :allowAutoClear="col.allowAutoClear"
+        @preSearch="preSearch"
+        @selectChanged="
+          (rowInfo) => {
+            pullDownChange(col, rowInfo)
+          }
+        "
+      />
+      <BaseTreeSelect
+        v-if="
+          col.controlType === 'treeSelect' &&
+          (col.isButtonShow == false || col.isButtonShow == undefined)
+        "
+        :formRow="formRow"
+        :api="col.api"
+        :tooltip="col.tooltip"
+        :row="row"
+        :edit="col.edit"
+        :label="col.title"
+        :rules="col.rules"
+        :route="col.route"
+        :field="col.field"
+        :columns="col.columns"
+        @preSearch="preSearch"
+        :replaceFields="col.replaceFields"
+        :treeWidth="col.treeWidth"
+        :width="col.width"
+        :linkedField="col.linkedField"
+        :showSearch="col.showSearch"
+        :allowClear="col.allowClear"
+        :placeholder="col.placeholder"
+        :linkedTitle="col.linkedTitle"
+        :method="col.method"
+        v-model="row[col.field]"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+      />
+    </div>
+    <div class="d-form-item-ghost"></div>
+    <div class="d-form-item-ghost"></div>
+    <div class="d-form-item-ghost"></div>
+    <div class="d-form-item-ghost"></div>
+  </div>
+</template>
+
+<script>
+import { sysFormState, sysRowState } from '../../utils/enum'
+import BaseInput from '../../BaseInput/index'
+import BaseCheckbox from '../../BaseCheckbox/index'
+import BaseDate from '../../BaseDate/index'
+import BaseDatetime from '../../BaseDatetime/index'
+import BaseDateWeek from '../../BaseDateWeek/index'
+import BaseTextArea from '../../BaseTextArea/index'
+import BaseButton from '../../BaseButton/index'
+import BaseSelect from '../../BaseSelect/index'
+import BaseSelectMulti from '../../BaseSelectMulti/index'
+import BaseTime from '../../BaseTime/index'
+import BasePulldown from '../../BasePulldown/index'
+import BaseIntervalInput from '../../BaseIntervalInput/index'
+import BaseNumberInput from '../../BaseNumberInput/index'
+import BaseTreeSelect from '../../BaseTreeSelect'
+
+import moment from 'moment'
+import BaseDateMonth from '../../BaseDateMonth'
+export default {
+  components: {
+    BaseInput,
+    BaseCheckbox,
+    BaseDate,
+    BaseDatetime,
+    BaseDateWeek,
+    BaseDateMonth,
+    BaseTextArea,
+    BaseButton,
+    BaseSelect,
+    BaseSelectMulti,
+    BaseTime,
+    BasePulldown,
+    BaseIntervalInput,
+    BaseNumberInput,
+    BaseTreeSelect,
+  },
+  name: 'BaseForm',
+  props: {
+    updateDatas: {
+      // 更新的数据
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    showLoading: {
+      // 是否显示加载信息
+      type: Boolean,
+      default: false,
+    },
+    isOld: {
+      // 是否老系统
+      type: Boolean,
+      default: false,
+    },
+    valueState: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    formState: {
+      type: String,
+      default: sysFormState.view,
+    },
+    formRow: {
+      // 当前页面数据集
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    row: {
+      // 当前行，如果是表单的话当前行和当前页面数据集是一样的
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    columns: {
+      // 表格列信息
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    dataName: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+  },
+  computed: {
+    internalComputedHiddenCols: function () {
+      let vm = this
+      return this.columns.filter((item) => {
+        // if (item.isTitle === true) {
+        //   // vm.titleCol = item
+        //   return false
+        // }
+        // if (item.controlType === controlType.image) {
+        //   vm.logoCol = item
+        //   return false
+        // }
+        return item.visible === true
+      })
+    },
+  },
+  filters: {},
+  data() {
+    return {
+      hiddenDetail: false,
+      moment,
+      editFormName: '',
+      internalEdit: false,
+      internalCols: [],
+      internalValueState: {},
+      internalFormState: sysFormState.view,
+      rules: {},
+      titleCols: [],
+      logoCol: null,
+      isShowEditForm: false,
+      ref: '',
+    }
+  },
+  watch: {
+    // row: {
+    //   handler: function (newVal) {
+    //   },
+    //   deep: true
+    // },
+    // cols: {
+    //   handler: function (newVal) {
+    //     this.internalCols = newVal
+    //   },
+    //   deep: true
+    // },
+    // valueState: { // 表单值状态，更新，还是插入
+    //   handler: function (newVal) {
+    //     this.internalValueState = newVal
+    //   },
+    //   deep: true
+    // },
+    // formState: {
+    //   handler: function (newVal) {
+    //     this.internalFormState = newVal
+    //     this.setColState()
+    //   },
+    //   deep: true
+    // }
+  },
+  created() {
+    for (let i = 0; i < this.columns.length; i++) {
+      // if (this.columns[i].isLogo === true) {
+      //   this.logoCol = this.columns[i]
+      //   continue
+      // }
+      // if (this.columns[i].isTitle === true) {
+      //   this.titleCols.push(this.columns[i])
+      //   continue
+      // }
+      if (this.columns[i].controlType === 'popup') {
+        let formUrl =
+          process.env[
+            'VUE_APP_' +
+              this.columns[i].linkModuleData.objectService.toUpperCase() +
+              '_SERVICE_URL'
+          ] +
+          '/' +
+          this.columns[i].linkModuleData.objectApiVersion +
+          '/' +
+          this.columns[i].linkModuleData.objectName +
+          '/'
+        this.columns[i]['api'] = this.columns[i].linkModuleData.objectApiRoute
+          ? formUrl + this.columns[i].linkModuleData.objectApiRoute
+          : formUrl + 'Search'
+
+        this.columns[i]['columns'] = {}
+
+        for (
+          let x = 0;
+          x < this.columns[i].linkModuleData.moduleFields.length;
+          x++
+        ) {
+          let tempField = this.columns[i].linkModuleData.moduleFields[x]
+          this.columns[i]['columns'][tempField.field] = {
+            title: tempField.caption,
+            width: tempField.width,
+            visible: tempField.visible,
+            linkField: tempField.linkValueField,
+            filter: tempField.isFilter,
+          }
+          if (tempField.field === this.columns[i].linkCaptionField) {
+            this.columns[i]['columns'][tempField.field].linkField =
+              this.columns[i].field
+            this.columns[i]['columns'][tempField.field].filter = true
+          }
+        }
+      }
+
+      // this.columns[i]['rules'] = {}
+      // if (this.columns[i].isRequire === true) {
+      //   this.columns[i].rules['required'] = true
+      // }
+      // if (this.columns[i].maxLength) {
+      //   this.columns[i].rules['length'] = [0, this.columns[i].maxLength]
+      // }
+    }
+  },
+
+  mounted() {
+    //let letterLength = this.$refs.content.value
+    //letterLength = this.$refs['content'].innerText.substr(0, 6) + '...'
+    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e))
+  },
+  destroyed() {
+    window.removeEventListener('beforeunload', (e) =>
+      this.beforeunloadHandler(e)
+    )
+  },
+  activated() {},
+  methods: {
+    preSearch(searchInfo, repeatRowInfo) {
+      this.$emit('preSearch', searchInfo, repeatRowInfo)
+    },
+    beforeunloadHandler(e) {
+      if (this.formState !== 'view') {
+        e = e || window.event
+        e.returnValue = '提示'
+        return confirm('确认退出')
+      } else {
+        return
+      }
+    },
+    pulldownBtnClick(btnInfo) {
+      this.$emit('pulldownBtnClick', btnInfo)
+    },
+    showToolTip() {},
+    fieldCaptionClick(col) {
+      // 下拉框
+      if (
+        col.linkModuleData &&
+        col.linkModuleData.linkModuleId &&
+        col.linkModuleData.linkModuleOperate.indexOf(sysFormState.view) >= 0
+      ) {
+        // 查找模块信息
+        let linkModule = this.$store.getters.addRouters.filter((filterItem) => {
+          return (
+            filterItem.meta &&
+            filterItem.meta.moduleId === col.linkModuleData.linkModuleId
+          )
+        })
+        if (linkModule.length > 0) {
+          this.$router.pushRoute({
+            name: linkModule[0].name,
+            query: { id: this.row[col.field] },
+          })
+        }
+      }
+    },
+    // selectChange(col) {
+    //   if (col.field.indexOf('.') < 0) {
+    //     this.updateDatas[col.field] = this.row[col.field]
+    //   }
+    //   if (
+    //     this.row['sysRowState'] === sysRowState.add ||
+    //     this.row['sysRowState'] === sysRowState.update
+    //   ) {
+    //     return
+    //   }
+    //   this.row['sysRowState'] = sysRowState.update
+    // },
+    pullDownChange(colInfo, row) {
+      this.$emit('change', colInfo)
+    },
+    selectMultiChange(colInfo, row) {
+      this.$emit('change', colInfo)
+    },
+    selectChange(colInfo) {
+      this.$emit('change', colInfo)
+    },
+    checkboxChange(colInfo) {
+      this.$emit('change', colInfo)
+    },
+    checkBoxChange(col) {
+      if (col.field.indexOf('.') < 0) {
+        this.updateDatas[col.field] = this.row[col.field]
+      }
+      this.$emit('change', col)
+      if (
+        this.row['sysRowState'] === sysRowState.add ||
+        this.row['sysRowState'] === sysRowState.update
+      ) {
+        return
+      }
+      this.row['sysRowState'] = sysRowState.update
+    },
+    dateChange(col) {
+      if (col.field.indexOf('.') < 0) {
+        this.updateDatas[col.field] = this.row[col.field]
+      }
+      this.$emit('change', col)
+      if (
+        this.row['sysRowState'] === sysRowState.add ||
+        this.row['sysRowState'] === sysRowState.update
+      ) {
+        return
+      }
+      this.row['sysRowState'] = sysRowState.update
+    },
+    inputChange(colInfo) {
+      // 输入框改变
+      this.$emit('change', colInfo)
+    },
+    // 按钮弹出组件返回输入的值
+    buttonHandleOk(colInfo, value) {
+      // 按钮弹出确定改变内容改变
+      this.$emit('buttonHandleOk', colInfo, value)
+    },
+    blurChange(colInfo) {
+      // 输入框失去焦点
+      this.$emit('blur', colInfo)
+    },
+    numberChange(colInfo) {
+      // 输入框改变
+      this.$emit('change', colInfo)
+    },
+    longtimeChange(data, col) {
+      this.row[col.field] = data
+      this.$emit('change', col)
+      if (
+        this.row['sysRowState'] === sysRowState.add ||
+        this.row['sysRowState'] === sysRowState.update
+      ) {
+        return
+      }
+      this.row['sysRowState'] = sysRowState.update
+    },
+    changeControlType(field, controlType) {
+      let col = this.internalComputedHiddenCols.find(
+        (col) => col.field === field
+      )
+      col.controlType = controlType
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.form-head {
+  display: flex;
+  flex-flow: row wrap;
+  margin-bottom: 10px;
+  .form-title {
+    margin-left: 10px;
+  }
+}
+.input-span {
+  //  line-height: 33px;
+  color: #0b0b0b;
+  font-size: 12px;
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
+  height: 32.8px;
+  white-space: nowrap;
+  // font-family: "Arial", "Microsoft YaHei";
+}
+.title-first-input {
+  width: 200px;
+  height: 25px;
+  font-size: 15px;
+  margin-left: 10px;
+  font-weight: 500;
+}
+.title-second-input {
+  width: 200px;
+  height: 25px;
+  font-size: 15px;
+  margin-left: 10px;
+  font-weight: 500;
+}
+.title-first-value {
+  width: 200px;
+  height: 40px;
+  font-size: 24px;
+  margin-left: 10px;
+  font-weight: 700;
+}
+.title-second-value {
+  width: 200px;
+  height: 26px;
+  font-size: 18px;
+  margin-left: 10px;
+  font-weight: 600;
+}
+.option:hover {
+  background-color: #219bff;
+}
+.form {
+  margin-left: 30px;
+}
+</style>
+<style lang="less">
+@import '../../styles/default.less';
+</style>