doway-coms 1.5.7 → 1.5.9

package/packages/BaseForm/src/index.vue

@@ -1,665 +1,665 @@
-<template>
-  <div class="d-form-items">
-    <div
-      class="d-form-item"
-      v-for="col in internalComputedHiddenCols"
-      :key="col.field"
-    >
-      <!-- 文本框输入控件 -->
-      <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"
-        @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);
-          }
-        "
-      />
-      <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"
-        @preSearch="preSearch"
-        @selectChanged="
-          (rowInfo) => {
-            pullDownChange(col, rowInfo);
-          }
-        "
-      />
-    </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 moment from "moment";
-export default {
-  components: {
-    BaseInput,
-    BaseCheckbox,
-    BaseDate,
-    BaseDatetime,
-    BaseDateWeek,
-    BaseTextArea,
-    BaseButton,
-    BaseSelect,
-    BaseSelectMulti,
-    BaseTime,
-    BasePulldown,
-    BaseIntervalInput,
-    BaseNumberInput,
-  },
-  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 {
-      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;
-    },
-  },
-};
-</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
+      class="d-form-item"
+      v-for="col in internalComputedHiddenCols"
+      :key="col.field"
+    >
+      <!-- 文本框输入控件 -->
+      <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"
+        @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);
+          }
+        "
+      />
+      <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"
+        @preSearch="preSearch"
+        @selectChanged="
+          (rowInfo) => {
+            pullDownChange(col, rowInfo);
+          }
+        "
+      />
+    </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 moment from "moment";
+export default {
+  components: {
+    BaseInput,
+    BaseCheckbox,
+    BaseDate,
+    BaseDatetime,
+    BaseDateWeek,
+    BaseTextArea,
+    BaseButton,
+    BaseSelect,
+    BaseSelectMulti,
+    BaseTime,
+    BasePulldown,
+    BaseIntervalInput,
+    BaseNumberInput,
+  },
+  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 {
+      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;
+    },
+  },
+};
+</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>