表单定义 新增表单添加查询明白 自定义组件添加选择属性

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

@@ -30,12 +30,15 @@
              <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="topForm.viName" 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="form.itemQtName" placeholder="请输入查询模板名称" size="mini"></el-input>
                  <el-select v-model="form.itemQtName" placeholder="请选择查询模板" size="mini">
                    <el-option v-for="(item,index) in searchQtNameList" :key="index" :label="item.qtName"
                       :value="item.qtName"></el-option>
                  </el-select>
                </span>

                <span style="display: flex;align-items: center; margin-right: 5px;">
@@ -129,7 +132,8 @@
              </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" @click="checkViewHandler" >预览</el-button>
              <el-button icon="el-icon-zoom-in" plain size="small" type="primary" @click="checkViewHandler">预览
              </el-button>
            </div>
          </basic-container>
        </el-main>
@@ -668,6 +672,29 @@
         <el-button type="primary" @click="customSaveHandler">确 定</el-button>
    </span>
    </el-dialog>
    <!-- 添加自定义组件选择属性池属性对话框  -->
    <el-dialog
      v-dialogDrag
      :visible.sync="customAttrVisible"
      append-to-body="true"
      class="avue-dialog"
      title="选择属性"
      width="50%">
      <avue-crud
        ref="userCrud"
        :data="customAttrData"
        :option="customAttrOption"
        :page.sync="page"
        :table-loading="customAttrLoading"
        @row-click="customAttrRowClickHandler"
      >
      </avue-crud>
      <span slot="footer" class="dialog-footer">
         <el-button @click="customAttrVisible = false">取 消</el-button>
         <el-button type="primary" @click="customAttrSaveHandler">确 定</el-button>
    </span>
    </el-dialog>
    <!-- 预览  -->
    <el-dialog
      v-dialogDrag
      :visible.sync="checkViewVisible"
@@ -748,8 +775,10 @@
</template>

<script>
import {getTreeAttributes, savePortalVI} from "@/api/UI/formDefine/api";
import {getObjTypeQTs, getTreeAttributes, savePortalVI} from "@/api/UI/formDefine/api";
import func from "@/util/func";
import basicOption from "@/util/basic-option";
import {gridAttribute} from "@/api/modeling/attributePool/api";

export default {
  name: "formDialog",
@@ -771,6 +800,51 @@
  },
  data() {
    return {
      searchQtNameList:[],
      customAttrRow: {},
      customAttrOption: {
        ...basicOption,
        calcHeight: -60,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        refreshBtn: false,
        highlightCurrentRow: true,
        selection: false,
        column: [
          {
            label: '属性名',
            prop: 'id',
            sortable: true,
          },
          {
            label: '标签',
            prop: 'name',
            sortable: true,
          },
          {
            label: '类型',
            prop: 'attributeDataTypeText',
            sortable: true,
            width: 100
          },
          {
            label: '默认值',
            prop: 'defaultValue',
            sortable: true,
            width: 120
          },
          {
            label: '描述',
            prop: 'description',
            overHidden: true,
          },
        ]
      },
      customAttrData: [],
      customAttrLoading: false,
      customAttrVisible: false,
      checkViewVisible: false,
      optionObj: {
        optionName: '',
@@ -954,6 +1028,7 @@
          this.treeLoading = false;
        }
      })
      this.getSearchSelectList();
    },

    // 开始拖拽树节点事件
@@ -1139,11 +1214,11 @@
    // 保存按钮
    saveClickHandler() {
      if (!this.topForm.viName) {
        this.$message.error('名称不能为空');
        this.$message.error('表单名称不能为空');
        return;
      }
      if (this.formList.length <= 0) {
        this.$message.error('页面不能为空');
        this.$message.error('页面定义不能为空');
        return;
      }
      this.formList = this.formList.map(item => {
@@ -1207,7 +1282,7 @@
        return;
      }
      const status = this.formList.some(item => item.text === this.customForm.text);
      if(status){
      if (status) {
        this.$message.error('请检查是否添加相同项');
        return;
      }
@@ -1238,14 +1313,38 @@
      this.customForm.itemListTable = this.customForm.itemListTxt = this.customForm.itemListVal = this.customForm.itemStyle = "";
    },

    // 自定义表单使用字段表格行点击
    customAttrRowClickHandler(row) {
      this.customAttrRow = row;
    },

    // 自定义表单使用字段选择
    customTextHandler() {
      this.customAttrVisible = true;
      this.customAttrLoading = true
      gridAttribute().then(res => {
        const data = res.data.data;
        this.customAttrData = data;
        this.customAttrLoading = false;
      }).catch(err => {
        this.$message.error(err)
      });
    },

    // 自定义表单使用字段保存
    customAttrSaveHandler() {
      if (func.isEmptyObject(this.customAttrRow)) {
        this.$message.error('请选择一条数据进行保存');
        return;
      }
      // console.log(this.customAttrRow)
      this.customForm.text = this.customAttrRow.id;
      this.customAttrVisible = false;
    },

    // 右侧表单应用按钮
    asideFormHandler() {
      if(!this.form.text){
      if (!this.form.text) {
        this.$message.error('请添加一条数据进行保存！');
        return;
      }
@@ -1257,9 +1356,16 @@
    },

    // 预览按钮
    checkViewHandler(){
    checkViewHandler() {
      this.checkViewVisible = true;
    }
    },

    // 查询模板下拉接口查询
    getSearchSelectList() {
      getObjTypeQTs({btName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name}).then(res => {
        this.searchQtNameList = res.data.data;
      })
    },

  }
}