doway-coms 2.10.71 → 2.10.73

package/packages/BaseForm/src/index.vue

@@ -1,873 +1,878 @@
-<template>
-  <div  :style="computedformStyle" class="form-container">
-    <a-button v-if="showFold===true"
-      class="collapse-btn"
-      type="link"
-      @click="hiddenDetail = !hiddenDetail"
-    >
-      <a-icon :type="hiddenDetail ? 'down' : 'up'" class="collapse-icon" />
-      <!-- {{ hiddenDetail ? '展开' : '收起' }} -->
-    </a-button>
-    <div
-      :style="getFieldStyle(col)"
-      v-for="(col,colIndex) in internalComputedHiddenCols"
-      :key="col.field"
-      v-show="hiddenDetail ? col.foldVisible===true : 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"
-        :route="col.route"
-        :row="row"
-        @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"
-        :warnTooltip="col.warnTooltip"
-        :max="col.max"
-        :precision="col.precision"
-        :percent="col.percent"
-        :doFormat="col.doFormat"
-        @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"
-        :showSearch="true"
-        :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"
-        :linkData="col.linkData"
-        :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)
-          }
-        "
-         @confirmMultiSelect="
-              (pulldownView, selectRows) =>
-                pulldownMultiSelect(col, pulldownView, selectRows)
-            "
-        :dataSource="col.dataSource"
-        :isMultiSelect="col.isMultiSelect"
-        :isLocalData="col.isLocalData"
-      />
-      <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>
-    <template v-if="layoutType==='default'">
-    <!-- <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> -->
-    </template>
-  </div>
-</template>
-
-<script>
-import XEUtils from 'xe-utils'
-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: {
-    showFold:{
-      type: Boolean,
-      default: function () {
-        return false
-      },
-    },
-    layoutType: {
-      // 布局方式。默认布局是flex自动换行布局，grid网格固定布局
-      type: String,
-      default: function () {
-        return 'default'
-      },
-    },
-    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: {
-    computedformStyle(){
-      let layoutFormStyle = {
-        display: 'flex',
-        columnGap: this.flexGap+ 'px',
-        rowGap:'7px',
-        flexFlow: 'row wrap',
-        justifyContent: 'flex-start',
-        padding: '5px 5px 0px 5px',
-        overflowY: 'auto',
-        paddingBottom:'7px'
-       }
-
-       if(this.layoutType==='grid'){
-              // 计算最大的行和列
-          let maxRow = XEUtils.max(this.columns,p=>p.row)
-          let maxCol = XEUtils.max(this.columns,p=>p.col)
-          layoutFormStyle = {
-            display: 'grid',
-            gridTemplateRows: `repeat(${maxRow}, auto)`,
-            gridTemplateColumns: `repeat(${maxCol}, 1fr)`,
-            columnGrap: this.flexGap + 'px'
-          }
-       }
-       //默认布局
-       return layoutFormStyle
-
-    },
-    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 {
-      flexGap:10,
-      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: {
-    getFieldStyle(colInfo){
-      // console.debug('0 0 calc('+colInfo.colSpan*250+'px -'+(colInfo.colSpan-1)*this.flexGap +'px)')
-      let fieldStyle ={
-        // width: colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
-        flex: '0 0 ' + (colInfo.width && colInfo.width>200?colInfo.width:250)+'px',   //colInfo.colSpan ? '0 0 '+(colInfo.colSpan*250+(colInfo.colSpan-1)*this.flexGap)+'px': '0 0 250px',
-
-        // flexGrow: 0,
-        // flexShrink: 0,
-        // flexBasis: colInfo.colSpan? (colInfo.colSpan*250)+'px':'250px',
-        // flexGrow: '1',
-        // flexShrink: '1',
-        // flexBasis:'250px', //colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
-        marginTop: '0px',
-        // marginRight: '8px',
-        marginBottom: '0px',
-        // marginLeft: '8px',
-        // padding: '2px 8px 2px 8px',
-        // minWidth: '250px',
-        borderRadius: '6px',
-        maxWidth:'100%'
-    }
-      if(this.layoutType==='grid'){
-        fieldStyle = {
-          gridRow: colInfo.row,
-          gridColumn: colInfo.col
-        }
-      }
-      return fieldStyle
-    },
-    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,row)
-    },
-    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
-    },
-    pulldownMultiSelect(col,pulldownView,selectRows){
-           //第一行选中
-          //  pulldownView.setLinkValue(selectRows[0], this.row)
-
-      // this.cellValueChange(scope)
-      // let vm = this
-      // for (let i = 1; i < selectRows.length; i++) {
-      //   let tempSelectRow = selectRows[i]
-      //   this.$emit('defaultRow', (newRow) => {
-      //     pulldownView.setLinkValue(tempSelectRow, newRow)
-      //     vm.insertAt(newRow, -1, false, (insertRow) => {
-      //       vm.cellValueChange({ row: insertRow, column: scope.column })
-      //     })
-      //   })
-      // }
-      this.$emit('selectRows', selectRows)
-    }
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.form-container{
-  position: relative
-}
-.d-form-item-ghost{
-  visibility: hidden;
-  height: 0;
-  min-height: 0px !important;
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: auto;
-  border: 1px solid #9ad4dc;
-  min-width: 150px;
-  width: 280px;
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 6px;
-}
-.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;
-}
-
-.collapse-btn {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  padding: 4px 8px;
-  z-index: 100;
-  background-color: #fff; // 添加背景色使按钮更突出
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); // 添加阴影效果
-  border-radius: 4px;
-  .collapse-icon {
-    transition: transform 0.3s;
-  }
-  &:hover {
-    background-color: #f0f0f0;
-  }
-}
-
-
-</style>
-<style lang="less">
-@import '../../styles/default.less';
-</style>
+<template>
+  <div  :style="computedformStyle" class="form-container">
+    <a-button v-if="showFold===true"
+      class="collapse-btn"
+      type="link"
+      @click="hiddenDetail = !hiddenDetail"
+    >
+      <a-icon :type="hiddenDetail ? 'down' : 'up'" class="collapse-icon" />
+      <!-- {{ hiddenDetail ? '展开' : '收起' }} -->
+    </a-button>
+    <div
+      :style="getFieldStyle(col)"
+      v-for="(col) in internalComputedHiddenCols"
+      :key="col.field"
+      v-show="hiddenDetail ? col.foldVisible===true : 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"
+        :route="col.route"
+        :row="row"
+        @change="
+          () => {
+            inputChange(col)
+          }
+        "
+        @blur="
+          () => {
+            blurChange(col)
+          }
+        "
+      >
+      <template #right="slotProps">
+        <slot :name="'right-' + col.field" v-bind="slotProps"></slot>
+      </template>
+    </BaseInput>
+      <!-- 按钮弹出框输入控件 -->
+      <!-- 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"
+        :warnTooltip="col.warnTooltip"
+        :max="col.max"
+        :precision="col.precision"
+        :percent="col.percent"
+        :doFormat="col.doFormat"
+        @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"
+        :showSearch="true"
+        :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"
+        :linkData="col.linkData"
+        :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)
+          }
+        "
+         @confirmMultiSelect="
+              (pulldownView, selectRows) =>
+                pulldownMultiSelect(col, pulldownView, selectRows)
+            "
+        :dataSource="col.dataSource"
+        :isMultiSelect="col.isMultiSelect"
+        :isLocalData="col.isLocalData"
+      />
+      <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>
+    <template v-if="layoutType==='default'">
+    <!-- <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> -->
+    </template>
+  </div>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+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: {
+    showFold:{
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+    layoutType: {
+      // 布局方式。默认布局是flex自动换行布局，grid网格固定布局
+      type: String,
+      default: function () {
+        return 'default'
+      },
+    },
+    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: {
+    computedformStyle(){
+      let layoutFormStyle = {
+        display: 'flex',
+        columnGap: this.flexGap+ 'px',
+        rowGap:'7px',
+        flexFlow: 'row wrap',
+        justifyContent: 'flex-start',
+        padding: '5px 5px 0px 5px',
+        overflowY: 'auto',
+        paddingBottom:'7px'
+       }
+
+       if(this.layoutType==='grid'){
+              // 计算最大的行和列
+          let maxRow = XEUtils.max(this.columns,p=>p.row)
+          let maxCol = XEUtils.max(this.columns,p=>p.col)
+          layoutFormStyle = {
+            display: 'grid',
+            gridTemplateRows: `repeat(${maxRow}, auto)`,
+            gridTemplateColumns: `repeat(${maxCol}, 1fr)`,
+            columnGrap: this.flexGap + 'px'
+          }
+       }
+       //默认布局
+       return layoutFormStyle
+
+    },
+    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 {
+      flexGap:10,
+      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: {
+    getFieldStyle(colInfo){
+      // console.debug('0 0 calc('+colInfo.colSpan*250+'px -'+(colInfo.colSpan-1)*this.flexGap +'px)')
+      let fieldStyle ={
+        // width: colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
+        flex: '0 0 ' + (colInfo.width && colInfo.width>200?colInfo.width:250)+'px',   //colInfo.colSpan ? '0 0 '+(colInfo.colSpan*250+(colInfo.colSpan-1)*this.flexGap)+'px': '0 0 250px',
+
+        // flexGrow: 0,
+        // flexShrink: 0,
+        // flexBasis: colInfo.colSpan? (colInfo.colSpan*250)+'px':'250px',
+        // flexGrow: '1',
+        // flexShrink: '1',
+        // flexBasis:'250px', //colInfo.colSpan ? ('calc('+colInfo.colSpan*250+'px + '+(colInfo.colSpan-1)*16+'px)'): '250px',
+        marginTop: '0px',
+        // marginRight: '8px',
+        marginBottom: '0px',
+        // marginLeft: '8px',
+        // padding: '2px 8px 2px 8px',
+        // minWidth: '250px',
+        borderRadius: '6px',
+        maxWidth:'100%'
+    }
+      if(this.layoutType==='grid'){
+        fieldStyle = {
+          gridRow: colInfo.row,
+          gridColumn: colInfo.col
+        }
+      }
+      return fieldStyle
+    },
+    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,row)
+    },
+    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
+    },
+    pulldownMultiSelect(col,pulldownView,selectRows){
+           //第一行选中
+          //  pulldownView.setLinkValue(selectRows[0], this.row)
+
+      // this.cellValueChange(scope)
+      // let vm = this
+      // for (let i = 1; i < selectRows.length; i++) {
+      //   let tempSelectRow = selectRows[i]
+      //   this.$emit('defaultRow', (newRow) => {
+      //     pulldownView.setLinkValue(tempSelectRow, newRow)
+      //     vm.insertAt(newRow, -1, false, (insertRow) => {
+      //       vm.cellValueChange({ row: insertRow, column: scope.column })
+      //     })
+      //   })
+      // }
+      this.$emit('selectRows', selectRows)
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.form-container{
+  position: relative
+}
+.d-form-item-ghost{
+  visibility: hidden;
+  height: 0;
+  min-height: 0px !important;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  border: 1px solid #9ad4dc;
+  min-width: 150px;
+  width: 280px;
+  margin-right: 8px;
+  margin-left: 8px;
+  border-radius: 6px;
+}
+.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;
+}
+
+.collapse-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  padding: 4px 8px;
+  z-index: 100;
+  background-color: #fff; // 添加背景色使按钮更突出
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); // 添加阴影效果
+  border-radius: 4px;
+  .collapse-icon {
+    transition: transform 0.3s;
+  }
+  &:hover {
+    background-color: #f0f0f0;
+  }
+}
+
+
+</style>
+<style lang="less">
+@import '../../styles/default.less';
+</style>