Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/components/formDialog.vue

@@ -11,12 +11,12 @@
  >
    <el-container>
      <div style="height: 79vh;display: flex;width: 100%;">

        <el-aside width="15%">
        <el-aside width="17%">
          <basic-container>
            <div style="height:650px;">
              <avue-tree
                :data="treeData"
                :loading="treeLoading"
                :option="treeOption"
                @node-drag-start="handleDragStart">
              </avue-tree>
@@ -26,48 +26,52 @@

        <el-main>
          <basic-container>
            <div style="height: 645px" @drop="drop" @dragover.prevent>
            <div style="height: 645px;overflow-y: auto;padding-right: 5px" @drop="drop" @dragover.prevent>
              <div style="display: flex;justify-content: center">
                <span style="display: flex;align-items: center; margin-right: 5px;">
                 <p class="tableTopLabel">名称：</p>
                 <el-input v-model="name" placeholder="请输入内容" size="mini"></el-input>
                 <el-input v-model="topForm.viName" placeholder="请输入内容" size="mini"></el-input>
                </span>

                <span style="display: flex;align-items: center; margin-right: 5px;">
                 <p class="tableTopLabel">查询模板名称：</p>
                 <el-input v-model="name" placeholder="请输入内容" size="mini"></el-input>
                 <el-input v-model="form.itemQtName" placeholder="请输入查询模板名称" size="mini"></el-input>
                </span>

                <span style="display: flex;align-items: center; margin-right: 5px;">
                 <p class="tableTopLabel">显示列数：</p>
                 <el-input v-model="name" placeholder="请输入内容" size="mini"></el-input>
                  <el-button plain size="mini" style="margin-left: 3px" type="success">设置</el-button>
                 <el-input v-model="topForm.showColumn" placeholder="请输入内容" size="mini"></el-input>
                  <el-button plain size="mini" style="margin-left: 3px" type="success"
                             @click="setColumnHandler">设置</el-button>
                </span>

                <span style="display: flex;align-items: center; margin-right: 5px;">
                 <p class="tableTopLabel">位置：</p>
                 <el-input v-model="name" placeholder="请输入内容" size="mini"></el-input>
                  <el-button plain size="mini" style="margin-left: 3px" type="success">调整位置</el-button>
                 <el-input v-model="topForm.position" placeholder="请输入内容" size="mini"></el-input>
                  <el-button plain size="mini" style="margin-left: 3px" type="success" @click="positionClickHandler">调整位置</el-button>
                </span>
              </div>
              <h3>页面定义</h3>
              <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row>
                  <el-col v-for="(item,index) in formList" :key="index" :span="columnNumber">
                    <el-tooltip :content="item.name" placement="top">
                      <el-form-item :label="item.name + '：'" class="hiddenLabel">
                        <el-input v-model="item.value" :splaceholder="item.name" size="mini"></el-input>
                      </el-form-item>
                    </el-tooltip>
                  <el-col v-for="(item,index) in formList" :key="index" :span="topForm.columnNumber">
                    <el-form-item :class="['hiddenLabel', { 'active-border': activeItem.text === item.text }]"
                                  :label="item.text + '：'"
                                  style="padding-left: 5px" @click.native="formItemClick(item,index)">
                      <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div style="display: flex;justify-content: center;margin-top: 15px">
              <el-button icon="el-icon-check" size="small" type="primary">保存</el-button>
              <el-button icon="el-icon-delete" plain size="small" type="danger">清空</el-button>
              <el-button icon="el-icon-el-icon-close" plain size="small" type="primary">删除组件</el-button>
              <el-button icon="el-icon-plus" plain size="small" type="primary">添加自定义组件</el-button>
              <el-button icon="el-icon-check" size="small" type="primary" @click="saveClickHandler">保存</el-button>
              <el-button icon="el-icon-delete" plain size="small" type="danger" @click="emptyClickHandler">清空
              </el-button>
              <el-button icon="el-icon-close" plain size="small" type="primary" @click="delModuleClickHandler">删除组件
              </el-button>
              <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addCustomClickHandler">添加自定义组件
              </el-button>
              <el-button icon="el-icon-zoom-in" plain size="small" type="primary">预览</el-button>
            </div>
          </basic-container>
@@ -82,24 +86,26 @@
                  <el-col :span="24">
                    <el-form-item label="使用字段">
                      <div style="display: flex">
                        <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                        <el-checkbox v-model="checked" style="margin-left: 5px; margin-right: 5px">只读</el-checkbox>
                        <el-checkbox v-model="checked" style="margin-left: 5px;margin-right: 0px">必填</el-checkbox>
                        <el-input v-model="form.text" placeholder="请输入使用字段" size="mini"></el-input>
                        <el-checkbox v-model="form.itemIsEditable" style="margin-left: 5px; margin-right: 5px">只读
                        </el-checkbox>
                        <el-checkbox v-model="form.itemIsRequired" style="margin-left: 5px;margin-right: 0px">必填
                        </el-checkbox>
                      </div>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="显示名称">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemName" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item class="rightLabel" label="显示类型">
                      <el-select v-model="form.region" placeholder="请选择活动区域" size="mini">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      <el-select v-model="form.itemType" placeholder="请选择类型" size="mini">
                        <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label"
                                   :value="item.value"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
@@ -107,38 +113,38 @@
                  <el-col :span="24">
                    <el-tooltip content="默认值表达式" placement="top">
                      <el-form-item class="hiddenLabel" label="默认值表达式">
                        <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                        <el-input v-model="form.itemValue" placeholder="请输入内容" size="mini"></el-input>
                      </el-form-item>
                    </el-tooltip>
                  </el-col>

                  <el-col :span="24">
                    <!--                    <el-tooltip content="显示表达式" placement="top">-->
                    <!-- <el-tooltip content="显示表达式" placement="top">-->
                    <el-form-item label="显示表达式">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemShowExpression" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                    <!--                    </el-tooltip>-->
                    <!-- </el-tooltip>-->
                  </el-col>

                  <el-col :span="24">
                    <el-tooltip content="日期格式化字符串" placement="top">
                      <el-form-item class="hiddenLabel" label="日期格式化字符串：">
                        <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                        <el-input v-model="form.itemDateFormat" placeholder="请输入内容" size="mini"></el-input>
                      </el-form-item>
                    </el-tooltip>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="占位方式">
                      <el-radio v-model="treeRadio" label="0">显示</el-radio>
                      <el-radio v-model="treeRadio" label="1">不显示</el-radio>
                      <el-radio v-model="form.itemCols" label="1">显示</el-radio>
                      <el-radio v-model="form.itemCols" label="2">不显示</el-radio>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24" style="height: 90px">
                    <el-form-item label="字段表达式">
                      <el-input
                        v-model="textarea2"
                        v-model="form.itemAddFilter"
                        :rows="3"
                        placeholder="请输入内容"
                        resize="none"
@@ -151,7 +157,7 @@
                    <el-tooltip content="只读选择条件" placement="top">
                      <el-form-item class="hiddenLabel" label="只读选择条件">
                        <el-input
                          v-model="textarea2"
                          v-model="form.itemEditableProgram"
                          :rows="3"
                          placeholder="请输入内容"
                          resize="none"
@@ -163,20 +169,20 @@

                  <el-col :span="12">
                    <el-form-item label="控制列">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemCtrlDisplyCol" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item class="rightLabel" label="显示列条件" label-width="95px">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemCtrlDisplyCondition" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="权限控制">
                      <div style="display: flex;align-items: center">
                        <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                        <el-input v-model="form.itemRight" placeholder="请输入内容" size="mini"></el-input>
                        <el-button plain size="mini" style="margin-left: 3px" type="success">选择</el-button>
                      </div>
                    </el-form-item>
@@ -187,7 +193,7 @@
                  <el-col :span="24" style="height: 90px">
                    <el-form-item label="脚本验证">
                      <el-input
                        v-model="textarea2"
                        v-model="form.itemScript"
                        :rows="3"
                        placeholder="请输入内容"
                        resize="none"
@@ -199,7 +205,7 @@
                  <el-col :span="24" style="height: 90px">
                    <el-form-item label="提示文字">
                      <el-input
                        v-model="textarea2"
                        v-model="form.itemTips"
                        :rows="3"
                        placeholder="请输入内容"
                        resize="none"
@@ -210,19 +216,19 @@

                  <el-col :span="24">
                    <el-form-item label="查询关联列">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemQueryRefFields" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="自定义类">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemCustomClass" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="存储路径">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemHttpVolumnPath" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

@@ -230,8 +236,8 @@
                    <el-tooltip content="存储路径字段" placement="top">
                      <el-form-item class="hiddenLabel" label="存储路径字段">
                        <div style="display: flex">
                          <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                          <el-checkbox v-model="checked" style="margin-left: 5px">http存储</el-checkbox>
                          <el-input v-model="form.itemHttpPathField" placeholder="请输入内容" size="mini"></el-input>
                          <el-checkbox v-model="form.itemIsHttpSave" style="margin-left: 5px">http存储</el-checkbox>
                        </div>
                      </el-form-item>
                    </el-tooltip>
@@ -239,17 +245,18 @@

                </el-row>

                <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
                <el-row v-if="form.itemType ? optionTypeStatus : true"
                        style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
                  <h4>选项列表</h4>
                  <el-col :span="12">
                    <el-form-item label="名称">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="optionObj.optionName" placeholder="请输入名称" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item class="rightLabel" label="值" label-width="95px">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="optionObj.optionValue" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

@@ -257,18 +264,19 @@
                    <el-form-item>
                      <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
                        <el-table
                          :data="optionRightData"
                          :data="form.itemValueList"
                          :highlight-current-row="true"
                          :show-header="false"
                          border
                          stripe
                          style="width: 100%">
                          style="width: 100%"
                          @row-click="optionTableClick">
                          <el-table-column
                            align="center"
                            label="名称"
                            prop="name">
                            prop="key">
                            <template slot-scope="scope">
                              <el-tag size="medium">{{ scope.row.name }}</el-tag>
                              <el-tag size="medium">{{ scope.row.key }}</el-tag>
                            </template>
                          </el-table-column>
                          <el-table-column
@@ -282,36 +290,39 @@
                        </el-table>
                      </div>
                      <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px">
                        <el-button plain size="mini" style="margin-right: 5px" type="success">添加</el-button>
                        <el-button plain size="mini" style="margin-left: 5px" type="danger">删除</el-button>
                        <el-button plain size="mini" style="margin-right: 5px" type="success"
                                   @click="optionAddClickHandler">添加
                        </el-button>
                        <el-button plain size="mini" style="margin-left: 5px" type="danger"
                                   @click="optionDeleteClickHandler">删除
                        </el-button>
                      </div>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="一级参照">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemListTable" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="二级参照">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemListTxt" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="参照值">
                      <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
                      <el-input v-model="form.itemListVal" placeholder="请输入内容" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 10px">
                <el-row v-if="form.itemType ? itemStyleTypeStatus : true" style="margin-top: 10px">
                  <el-col :span="24" style="height: 90px">
                    <el-form-item label="附加属性">
                      <el-input
                        v-model="textarea2"
                        v-model="form.itemStyle"
                        :rows="3"
                        placeholder="请输入内容"
                        resize="none"
@@ -325,19 +336,392 @@
            </div>
          </basic-container>
        </el-aside>

      </div>

    </el-container>

    <!-- 添加自定义组件 -->
    <el-dialog
      v-dialogDrag
      v-loading="customLoading"
      :visible.sync="customVisible"
      append-to-body="true"
      class="avue-dialog"
      title="表单"
      width="40%"
      @close="closeCustomDialog">
      <el-form ref="form" :model="customForm" :rules="rules" label-position="left" label-width="85px">
        <el-row style="border-bottom: 1px solid #878585;padding-bottom: 10px">
          <el-col :span="24">
            <el-form-item label="使用字段">
              <div style="display: flex">
                <el-input v-model="customForm.text" placeholder="请输入使用字段" size="mini"></el-input>
                <el-checkbox v-model="customForm.itemIsEditable" style="margin-left: 5px; margin-right: 5px">只读
                </el-checkbox>
                <el-checkbox v-model="customForm.itemIsRequired" style="margin-left: 5px;margin-right: 0px">必填
                </el-checkbox>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="显示名称">
              <el-input v-model="customForm.itemName" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item class="rightLabel" label="显示类型">
              <el-select v-model="customForm.itemType" placeholder="请选择类型" size="mini">
                <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-tooltip content="默认值表达式" placement="top">
              <el-form-item class="hiddenLabel" label="默认值表达式">
                <el-input v-model="customForm.itemValue" placeholder="请输入内容" size="mini"></el-input>
              </el-form-item>
            </el-tooltip>
          </el-col>

          <el-col :span="24">
            <!--                    <el-tooltip content="显示表达式" placement="top">-->
            <el-form-item label="显示表达式">
              <el-input v-model="customForm.itemShowExpression" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
            <!--                    </el-tooltip>-->
          </el-col>

          <el-col :span="24">
            <el-tooltip content="日期格式化字符串" placement="top">
              <el-form-item class="hiddenLabel" label="日期格式化字符串：">
                <el-input v-model="customForm.itemDateFormat" placeholder="请输入内容" size="mini"></el-input>
              </el-form-item>
            </el-tooltip>
          </el-col>

          <el-col :span="24">
            <el-form-item label="占位方式">
              <el-radio v-model="customForm.itemCols" label="1">显示</el-radio>
              <el-radio v-model="customForm.itemCols" label="2">不显示</el-radio>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="height: 90px">
            <el-form-item label="字段表达式">
              <el-input
                v-model="customForm.itemAddFilter"
                :rows="3"
                placeholder="请输入内容"
                resize="none"
                type="textarea">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="height: 90px">
            <el-tooltip content="只读选择条件" placement="top">
              <el-form-item class="hiddenLabel" label="只读选择条件">
                <el-input
                  v-model="customForm.itemEditableProgram"
                  :rows="3"
                  placeholder="请输入内容"
                  resize="none"
                  type="textarea">
                </el-input>
              </el-form-item>
            </el-tooltip>
          </el-col>

          <el-col :span="12">
            <el-form-item label="控制列">
              <el-input v-model="customForm.itemCtrlDisplyCol" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item class="rightLabel" label="显示列条件" label-width="95px">
              <el-input v-model="customForm.itemCtrlDisplyCondition" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="权限控制">
              <div style="display: flex;align-items: center">
                <el-input v-model="customForm.itemRight" placeholder="请输入内容" size="mini"></el-input>
                <el-button plain size="mini" style="margin-left: 3px" type="success">选择</el-button>
              </div>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
          <el-col :span="24" style="height: 90px">
            <el-form-item label="脚本验证">
              <el-input
                v-model="customForm.itemScript"
                :rows="3"
                placeholder="请输入内容"
                resize="none"
                type="textarea">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="height: 90px">
            <el-form-item label="提示文字">
              <el-input
                v-model="customForm.itemTips"
                :rows="3"
                placeholder="请输入内容"
                resize="none"
                type="textarea">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="查询关联列">
              <el-input v-model="customForm.itemQueryRefFields" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="自定义类">
              <el-input v-model="customForm.itemCustomClass" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="存储路径">
              <el-input v-model="customForm.itemHttpVolumnPath" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-tooltip content="存储路径字段" placement="top">
              <el-form-item class="hiddenLabel" label="存储路径字段">
                <div style="display: flex">
                  <el-input v-model="customForm.itemHttpPathField" placeholder="请输入内容" size="mini"></el-input>
                  <el-checkbox v-model="customForm.itemIsHttpSave" style="margin-left: 5px">http存储</el-checkbox>
                </div>
              </el-form-item>
            </el-tooltip>
          </el-col>

        </el-row>

        <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
          <h4>选项列表</h4>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-model="customOptionObj.optionName" placeholder="请输入名称" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item class="rightLabel" label="值" label-width="95px">
              <el-input v-model="customOptionObj.optionValue" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="height: 190px">
            <el-form-item>
              <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="customForm.itemValueList"
                  :highlight-current-row="true"
                  :show-header="false"
                  border
                  stripe
                  style="width: 100%">
                  <el-table-column
                    align="center"
                    label="名称"
                    prop="key">
                    <template slot-scope="scope">
                      <el-tag size="medium">{{ scope.row.key }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="值"
                    prop="value">
                    <template slot-scope="scope">
                      <el-tag size="medium">{{ scope.row.value }}</el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px">
                <el-button plain size="mini" style="margin-right: 5px" type="success"
                           @click="optionAddClickHandler('dialog')">添加
                </el-button>
                <el-button plain size="mini" style="margin-left: 5px" type="danger">删除</el-button>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="一级参照">
              <el-input v-model="customForm.itemListTable" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="二级参照">
              <el-input v-model="customForm.itemListTxt" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="参照值">
              <el-input v-model="customForm.itemListVal" placeholder="请输入内容" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="24" style="height: 90px">
            <el-form-item label="附加属性">
              <el-input
                v-model="customForm.itemStyle"
                :rows="3"
                placeholder="请输入内容"
                resize="none"
                type="textarea">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="customVisible = false">取 消</el-button>
         <el-button type="primary">确 定</el-button>
    </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {getTreeAttributes} from "@/api/UI/formDefine/api";
import func from "@/util/func";

export default {
  name: "formDialog",
  props: {
    TreeNodeRow: {
      type: Object,
      default: () => {
      }
    },
    treeRadio: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      optionObj: {
        optionName: '',
        optionValue: ''
      },
      customOptionObj: {
        optionName: '',
        optionValue: ''
      },
      customForm: {
        itemValueList: [],
      },
      customLoading: false,
      customVisible: false,
      treeLoading: false,
      showSelectList: [
        {
          label: '单行文本框',
          value: 'text'
        },
        {
          label: '文本按钮框',
          value: 'textbtn'
        },
        {
          label: '多行文本框',
          value: 'textarea'
        },
        {
          label: '富文本框',
          value: 'richtext'
        },
        {
          label: '数字输入框',
          value: 'number'
        },
        {
          label: '密码框',
          value: 'password'
        },
        {
          label: '单选按钮',
          value: 'radio'
        },
        {
          label: '多选按钮',
          value: 'checkbox'
        },
        {
          label: '下拉菜单',
          value: 'select'
        },
        {
          label: '多选下拉菜单',
          value: 'multiselect'
        },
        {
          label: '日期输入框',
          value: 'date'
        },
        {
          label: '时间输入框',
          value: 'time'
        },
        {
          label: '日期时间输入框',
          value: 'datetime'
        },
        {
          label: '文件上传',
          value: 'file'
        },
        {
          label: '多文件上传',
          value: 'multiFile'
        },
        {
          label: '自定义',
          value: 'custom'
        },
        {
          label: '自定义表单',
          value: 'customform'
        },
        {
          label: '隐藏或普通文字',
          value: 'hidden'
        },
        {
          label: 'Web编辑器',
          value: 'webeditor'
        },
        {
          label: '特殊字符',
          value: 'specialCharacter'
        },
      ],
      activeItem: {}, // 用于存储当前点击的 item 的节点信息
      activeItemIndex: null, // 用于存储当前点击节点的 index 下标
      formList: [],
      optionRightData: [
        {
@@ -346,208 +730,71 @@
        }
      ],
      form: {},
      topForm: {
        columnNumber: 8,
        showColumn: '',
        viName: '',
        position: ''
      },
      rules: {},
      columnNumber: 3,
      loading: false,
      visible: false,
      treeOption: {
        height: 'auto',
        menu: false,
        addBtn: false,
        draggable: true,
        defaultExpandedKeys: ['root'],
        allowDrop: () => {
          return false;
        },
        allowDrag: () => {
          return true;
        },
        // props: {
        //   label: 'name',
        //   value: 'id',
        //   children: 'children',
        // },
        props: {
          label: 'text',
          value: 'oid',
          children: 'children',
        },
      },
      treeData: [
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        },
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        },
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        },
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        },
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        },
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        },
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1',
            }, {
              value: 2,
              label: '一级部门2',
            }
          ]
        }, {
          value: 3,
          label: '二级部门',
          children: [
            {
              value: 4,
              label: '二级部门1',
            }, {
              value: 5,
              label: '二级部门2',
            }
          ]
        }
      ]
      treeData: []
    }
  },
  computed: {
    optionTypeStatus() {
      const types = ['radio', 'checkbox', 'select'];
      return types.includes(this.form.itemType); // 展示
    },

    itemStyleTypeStatus() {
      const types = ['hidden', 'webeditor', 'radio', 'checkbox'];
      return !types.includes(this.form.itemType); // 不展示
    }
  },
  created() {
    // this.getTreeList();
  },
  methods: {
    // 关闭对话框
    closeDialog() {
      this.formList = [];

    },

    getTreeList() {
      this.treeLoading = true;
      const params = {
        'conditionMap[typeName]': this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name,
        'conditionMap[isDefault]': true,
        'conditionMap[typeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '',
      }
      getTreeAttributes(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.treeData = data;
          this.treeLoading = false;
        }
      })
    },

    // 开始拖拽树节点事件
@@ -560,13 +807,183 @@
    drop(event) {
      // 使用 getData 方法获取数据
      const data = JSON.parse(event.dataTransfer.getData('item'));
      console.log('data', data);
      const params = {
        name: data.label,
        value: '',
        type: ''
        text: data.text,
        oid: data.oid,
      }
      this.formList.push(params)
      const isDuplicate = this.formList.some(item => item.text === data.text);

      if (isDuplicate) {
        this.$message.error('请检查是否添加相同项！')
      } else {
        this.formList.push(params);
      }
    },

    // 页面定义选项点击
    formItemClick(item, index) {
      this.activeItem = item;
      this.activeItemIndex = index;
      this.form = {...item};
    },

    // 设置显示行数
    setColumnHandler() {
      const number = /^[0-9]*\.?[0-9]+$/.test(this.topForm.showColumn);

      if (!number) {
        this.$message.error('值必须是数字字符');
        return;
      }
      this.topForm.columnNumber = this.getValueBasedOnInput(this.topForm.showColumn);
    },

    // 根据传入每行列数 来判断el-col :span是多少
    getValueBasedOnInput(val) {
      const n = JSON.parse(val ? val : '3');
      switch (n) {
        case 1:
          return 24;
        case 2:
          return 12;
        case 3:
          return 8;
        case 4:
          return 6;
        case 5:
          return 4;
        case 6:
          return 4;
        case 7:
        case 8:
          return 3;
        case 9:
          return 2;
        default:
          return n > 10 ? 1 : 8; // 默认给8
      }
    },

    // 清空页面定义
    emptyClickHandler() {
      this.$confirm('您确定要清空所有数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formList = [];
        this.activeItem = {};
        this.form = {};
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 删除组件
    delModuleClickHandler() {
      if (func.isEmptyObject(this.activeItem)) {
        this.$message.error('请选择一条数据进行删除');
        return;
      }
      this.formList = this.formList.filter(item => item.text != this.activeItem.text);
      this.activeItem = {};
      this.form = {};
    },

    // 调整位置
    positionClickHandler() {
      if (!this.topForm.position) {
        this.$message.error('请输入调整位置');
        return;
      }

      if (func.isEmptyObject(this.activeItem)) {
        this.$message.error('请选择一条数据进行调整位置');
        return;
      }

      const number = /^[0-9]*\.?[0-9]+$/.test(this.topForm.position);

      if (!number) {
        this.$message.error('值必须是数字字符');
        return;
      }

      // 先将要更换位置的项通过 activeItemIndex 进行移除
      this.formList.splice(this.activeItemIndex, 1);
      // 将当前点击对象 activeItem 插入到数组中对应位置
      this.formList.splice(JSON.parse(this.topForm.position) - 1, 0, this.activeItem);
      this.activeItem = {};
      this.activeItemIndex = null;
    },

    // 选项表格行点击
    optionTableClick(row) {
      console.log(row);
    },

    // 选项添加
    optionAddClickHandler(val) {
      let optionObj, itemValueList;

      if (val === 'dialog') {
        optionObj = this.customOptionObj;
        itemValueList = this.customForm.itemValueList;
      } else {
        if (func.isEmptyObject(this.activeItem)) {
          this.$message.error('请选择一条数据进行添加选项');
          return;
        }
        optionObj = this.optionObj;
        itemValueList = this.form.itemValueList;
      }

      if (!optionObj.optionName) {
        this.$message.error('请输入选项名称');
        return;
      }

      if (!optionObj.optionValue) {
        this.$message.error('请输入选项值');
        return;
      }

      const params = {
        key: optionObj.optionName,
        value: optionObj.optionValue
      };

      itemValueList.push(params);
    },

    // 选项删除
    optionDeleteClickHandler() {

    },

    // 添加自定义组件
    addCustomClickHandler() {
      this.customVisible = true;
    },

    // 保存按钮
    saveClickHandler() {
      if (!this.topForm.viName) {
        this.$message.error('名称不能为空');
        return;
      }
      if (this.formList.length <= 0) {
        this.$message.error('页面不能为空');
        return;
      }

    }
  }
}
@@ -582,6 +999,12 @@
    }
  }

  .active-border {
    .el-form-item__label {
      color: #f56c6c; /* 设置边框的样式 */
    }
  }

  .el-col {
    margin-bottom: 0px;
    height: 40px;