表单定义 新增表格修改添加方式

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

@@ -9,10 +9,10 @@
    width="60%"
    @close="closeDialog"
  >
    <el-form v-loading="formLoading" :model="form" :rules="rules" label-position="right" label-width="100px">
    <el-form ref="form" v-loading="formLoading" :model="form" :rules="rules" label-position="right" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称">
          <el-form-item label="名称" prop="viName">
            <el-input v-model="form.viName" placeholder="请输入名称" size="mini"></el-input>
          </el-form-item>
        </el-col>
@@ -30,14 +30,14 @@
        </el-col>

        <el-col :span="12">
          <el-form-item label="绑定表单">
          <el-form-item label="绑定表单" prop="itemInObj">
            <div style="display: flex;align-items: center;">
              <el-select v-model="form.itemInObj" clearable placeholder="请选择绑定表单" size="mini">
              <el-select v-model="form.itemInObj" clearable placeholder="请选择绑定表单" size="mini"
                         @change="formSelectChange">
                <el-option v-for="(item,index) in selectList" :key="index" :label="item.viName"
                           :value="item.id"></el-option>
              </el-select>
              <el-button plain size="mini" style="margin-left: 3px" type="success" @click="formSelectClickHandler">选择
              </el-button>

            </div>
          </el-form-item>
        </el-col>
@@ -54,131 +54,42 @@
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="显示字段">
            <div style="display: flex; align-items: center">
              <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="form.itemSelectOutFieldList"
                  :highlight-current-row="true"
                  style="width: 100%"
                  @row-click="showLabelLeftRowClick">
                  <el-table-column
                    align="center"
                    label="可使用字段"
                    prop="id">
                  </el-table-column>
                </el-table>
              </div>
              <div style="margin-left: 10px; margin-right: 10px">
                <el-button circle icon="el-icon-back" style="margin-right: 10px"
                           @click="showLeftTransferClick"></el-button>
                <el-button circle icon="el-icon-right" @click="showRightTransferClick"></el-button>
              </div>
              <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="form.itemOutFieldList"
                  :highlight-current-row="true"
                  style="width: 100%"
                  @row-click="showLabelRightRowClick">
                  <el-table-column
                    align="center"
                    label="需要使用字段"
                    prop="id">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="搜索字段">
            <div style="display: flex; align-items: center">
              <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="form.itemSearchFieldList"
                  :highlight-current-row="true"
                  style="width: 100%"
                  @row-click="searchLeftRowClick">
                  <el-table-column
                    align="center"
                    label="可供搜索字段"
                    prop="id">
                  </el-table-column>
                </el-table>
              </div>
              <div style="margin-left: 10px; margin-right: 10px">
                <el-button circle icon="el-icon-back" style="margin-right: 10px"
                           @click="searchLeftTransferClick"></el-button>
                <el-button circle icon="el-icon-right" @click="searchRightTransferClick"></el-button>
              </div>
              <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="form.itemKeyFieldList"
                  :highlight-current-row="true"
                  style="width: 100%"
                  @row-click="searchRightRowClick">
                  <el-table-column
                    align="center"
                    label="需搜索字段"
                    prop="id">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="列">
            <el-select v-model="form.itemFileWidthSelect" placeholder="请选择列" size="mini" @change="itemFileWidthChange">
              <el-option v-for="(item,index) in form.itemFieldWidthList" :key="index" :label="item.key"
                         :value="item.key"></el-option>
        <el-col :span="24">
          <el-form-item label="显示字段" prop="showLabel">
            <el-select v-model="form.itemOutFieldList" multiple placeholder="请选择" style="width: 100%"
                       @change="outFileChange">
              <el-option
                v-for="(item,index) in form.itemSelectOutFieldList"
                :key="index"
                :label="item.id"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="宽度">
            <div style="display: flex;align-items: center;">
              <el-input v-model="form.itemWidth" placeholder="请输入宽度" size="mini" style="width: 193px"
                        type="number"></el-input>
              <el-button plain size="mini" style="margin-left: 3px" type="success" @click="widthSetUpClickHandler">设置
              </el-button>
            </div>
        <el-col :span="24">
          <el-form-item label="搜索字段">
            <el-select v-model="form.itemKeyFieldList" multiple placeholder="请选择" style="width: 100%">
              <el-option
                v-for="(item,index) in form.itemSearchFieldList"
                :key="index"
                :label="item.id"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>

      <el-col :span="24">
        <el-form-item label="设置列宽">
          <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
            <el-table
              :data="form.itemFieldWidthList"
              :highlight-current-row="true"
              border
              stripe
              style="width: 100%"
              @row-click="itemFileWidthRowClick">
              <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>
          <avue-crud
            :data="form.itemFieldWidthList"
            :option="fileWidthOption">
          </avue-crud>

        </el-form-item>
      </el-col>

@@ -295,29 +206,6 @@
         <el-button @click="closeDialog">取 消</el-button>
         <el-button type="primary" @click="dialogSaveClickHandler">确 定</el-button>
    </span>

    <el-dialog
      v-dialogDrag
      v-loading="selectFormLoading"
      :visible.sync="selectFormVisible"
      append-to-body="true"
      class="avue-dialog"
      title="表单选择"
      width="50%">
      <avue-crud
        ref="crud"
        :data="selectFormData"
        :option="selectFormOption"
        @selection-change="selectionChange"
        @row-click="rowClick">

      </avue-crud>

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

</template>
@@ -345,6 +233,35 @@
  },
  data() {
    return {
      fileWidthOption: {
        ...basicOption,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        refreshBtn: false,
        highlightCurrentRow: true,
        height: 200,
        menu: false,
        selection: false,
        column: [
          {
            label: '列名',
            prop: 'key',
          },
          {
            label: '列宽',
            prop: 'value',
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入列宽',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      searchQtNameList: [],
      formLoading: false,
      itemImgHeight: '',
@@ -376,7 +293,23 @@
      selectFormData: [],
      selectFormLoading: false,
      selectFormVisible: false,
      rules: {},
      rules: {
        viName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        itemInObj: [{
          required: true,
          message: '请选择绑定表单',
          trigger: 'change'
        }],
        showLabel: [{
          required: true,
          message: '请选择显示字段',
          trigger: 'submit'
        }],
      },
      form: {
        viName: '', // 名称
        itemPageSize: '', // 每页可显示行数
@@ -391,7 +324,6 @@
        itemKeyFieldList: [], // 需要搜索字段
        itemWidth: '250', // 宽度
        itemFieldWidthList: [], // 设置列宽数组 与 itemOutFieldList 相匹配
        itemFileWidthSelect: '', // 列下拉框
        searchLabel: '', // 查询字段
        searchNumber: '1', // 查询次数
        searchSql: '', // 查询sql
@@ -416,7 +348,6 @@
        itemKeyFieldList: [], // 需要搜索字段
        itemWidth: '250', // 宽度
        itemFieldWidthList: [], // 设置列宽数组 与 itemOutFieldList 相匹配
        itemFileWidthSelect: '', // 列下拉框
        searchLabel: '', // 查询字段
        searchNumber: '1', // 查询次数
        searchSql: '', // 查询sql
@@ -440,33 +371,6 @@
    }
  },
  methods: {
    // 关闭对话框
    closeDialog() {
      this.visible = false;
      this.form = {...this.defaultForm};
    },

    // 选择表单关闭对话框
    closeSelectFormDialog() {

    },

    // 选择绑定表单
    formSelectClickHandler() {
      this.selectFormVisible = true;
      const params = {
        'conditionMap[typeName]': this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name,
        'conditionMap[viType]': 'Form',
        'conditionMap[viTypeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '',
      }
      gridPortalVIDatas(1, -1, params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.selectFormData = data;
        }
      });
    },

    // 获取初始化表格里需要的默认数据
    getFormSelectList() {
      this.formLoading = true;
@@ -502,53 +406,45 @@
          const list = data.filter(item =>
            !this.form.itemOutFieldList.some(outItem => outItem.id === item.id)
          );
          this.getSearchSelectList();
          this.getSearchSelectList(); // 选择表单下拉接口
          this.getFormSelect(); // 查询模板下拉接口
          this.getDbList(); // 双击操作下拉接口
          this.$set(this.form, 'itemSelectOutFieldList', list);
          this.formLoading = false;
        }
      })
    },

    // 查询模板下拉接口查询
    getSearchSelectList() {
      getObjTypeQTs({btName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name}).then(res => {
        this.searchQtNameList = res.data.data;
      })
    // 关闭对话框
    closeDialog() {
      this.visible = false;
      this.$refs.form.clearValidate();
      this.form = {...this.defaultForm};
    },

    // 表格多选
    selectionChange(list) {
      this.selectList = list;
    },

    // 行点击
    rowClick(row) {
      func.rowClickHandler(
        row,
        this.$refs.crud,
        this.lastIndex,
        (newIndex) => {
          this.lastIndex = newIndex;
        },
        () => {
          this.selectList = [];
        }
      );
    },

    // 表单选择确定
    selectFormAddClickHandler() {
      if (this.selectList.length <= 0) {
        this.$message.error('请至少选择一条数据');
        return;
      }

      if (this.selectList.length > 1) {
        this.$message.error('只能选择一条数据');
        return;
      }
    // 获取选择表单数据
    getFormSelect() {
      const params = {
        id: this.selectList[0].id,
        'conditionMap[typeName]': this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name,
        'conditionMap[viType]': 'Form',
        'conditionMap[viTypeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '',
      }
      gridPortalVIDatas(1, -1, params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.selectList = data;
        }
      });
    },

    // 表单选择change事件
    formSelectChange(val) {
      // console.log(val);
      this.form.itemOutFieldList = [];
      this.form.itemKeyFieldList = [];
      this.form.itemFieldWidthList = [];

      const params = {
        id: val,
        viType: '1'
      }
      getPortalVIById(params).then(res => {
@@ -559,120 +455,32 @@
            }
          });
          this.form.itemSelectOutFieldList = data;
          this.selectFormVisible = false;
        }
      })
      this.form.itemInObj = this.selectList[0].id;
    },

    // 显示字段左侧表格行点击
    showLabelLeftRowClick(row) {
      this.showLabelLeftRow = row;
    // 显示字段change
    outFileChange(val) {
      this.form.itemSearchFieldList = this.form.itemOutFieldList.map(item => {
        return {
          id: item
        }
      })
      this.form.itemFieldWidthList = this.form.itemOutFieldList.map(item => {
        return {
          $cellEdit: true,
          key: item,
          value: '250',

        }
      })
    },

    // 显示字段右侧表格行点击
    showLabelRightRowClick(row) {
      this.showLabelRightRow = row;
    },

    // 搜索字段左侧表格行点击
    searchLeftRowClick(row) {
      this.searchLeftRow = row;
    },

    // 搜索字段右侧表格行点击
    searchRightRowClick(row) {
      this.searchRightRow = row;
    },

    // 显示字段穿梭框左移
    showLeftTransferClick() {
      if (func.isEmptyObject(this.showLabelRightRow)) {
        this.$message.error('请选择一条数据');
        return;
      }
      this.form.itemSelectOutFieldList.unshift(this.showLabelRightRow);
      this.form.itemOutFieldList = this.form.itemOutFieldList.filter(item => item.id !== this.showLabelRightRow.id);
      this.form.itemSearchFieldList = this.form.itemOutFieldList;
      this.form.itemFieldWidthList = this.form.itemFieldWidthList.filter(item => item.key !== this.showLabelRightRow.id);
      this.form.itemFileWidthSelect = this.form.itemFieldWidthList.length >= 1 ? this.form.itemFieldWidthList[0].key : '';
      this.showLabelRightRow = {};
    },

    // 显示字段穿梭框右移
    showRightTransferClick() {
      if (func.isEmptyObject(this.showLabelLeftRow)) {
        this.$message.error('请选择一条数据');
        return;
      }


      const onlyFlag = this.form.itemOutFieldList.some(item => item.id === this.showLabelLeftRow.id);

      if (onlyFlag) {
        this.$message.error('请检查是否有重复项');
        this.form.itemSelectOutFieldList = this.form.itemSelectOutFieldList.filter(selectItem =>
          !this.form.itemOutFieldList.some(outItem => outItem.id === selectItem.id)
      )
        return;
      }

      this.form.itemOutFieldList.push(this.showLabelLeftRow);
      this.form.itemSearchFieldList = this.form.itemOutFieldList;

      // 过滤 itemSelectOutFieldList，移除 id 与 showLabelLeftRow.id 相同的对象
      this.form.itemSelectOutFieldList = this.form.itemSelectOutFieldList.filter(item => item.id !== this.showLabelLeftRow.id);
      this.form.itemFieldWidthList.push({
        key: this.showLabelLeftRow.id,
        value: this.form.itemWidth
      });
      this.form.itemFileWidthSelect = this.form.itemFieldWidthList[0].key;
      this.showLabelLeftRow = {};

    },

    // 搜索字段穿梭框左移
    searchLeftTransferClick() {
      if (func.isEmptyObject(this.searchRightRow)) {
        this.$message.error('请选择一条数据');
        return;
      }
      this.form.itemSearchFieldList.unshift(this.searchRightRow);
      this.form.itemKeyFieldList = this.form.itemKeyFieldList.filter(item => item.id !== this.searchRightRow.id)
      this.searchRightRow = {};
    },

    // 搜索自动穿梭框右移
    searchRightTransferClick() {
      if (func.isEmptyObject(this.searchLeftRow)) {
        this.$message.error('请选择一条数据');
        return;
      }

      this.form.itemKeyFieldList.push(this.searchLeftRow);

      this.form.itemSearchFieldList = this.form.itemSearchFieldList.filter(item => item.id !== this.searchLeftRow.id);
      this.searchLeftRow = {};
    },

    // 设置列宽行点击
    itemFileWidthRowClick(row) {
      this.itemFileWidthRow = row;
      this.form.itemFileWidthSelect = row.key;
      this.form.itemWidth = row.value;
    },

    // 列下拉change
    itemFileWidthChange(val) {
      this.itemFileWidthChangeVal = val;
    },

    // 设置宽度
    widthSetUpClickHandler() {
      if (this.form.itemFileWidthSelect) {
        const item = this.form.itemFieldWidthList.find(item => item.key === this.form.itemFileWidthSelect);
        item.value = this.form.itemWidth;
      }
    // 查询模板下拉接口查询
    getSearchSelectList() {
      getObjTypeQTs({btName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name}).then(res => {
        this.searchQtNameList = res.data.data;
      })
    },

    // 获取双击操作数据
@@ -715,36 +523,43 @@

    // 表格对话框保存
    dialogSaveClickHandler() {
      const paramsForm = {...this.form};
      paramsForm.itemSelectOutFieldList = this.form.itemSelectOutFieldList.map(item => item.id); // 可使用字段
      paramsForm.itemOutFieldList = this.form.itemOutFieldList.map(item => item.id); // 需要使用字段
      paramsForm.itemSearchFieldList = this.form.itemSearchFieldList.map(item => item.id); // 可供搜索字段
      paramsForm.itemKeyFieldList = this.form.itemKeyFieldList.map(item => item.id); // 需要使用字段
      paramsForm.itemImgWH = `${this.itemImgWidth},${this.itemImgHeight}`;
      const params = {
        id: this.form.editNodeId,
        prm: {
          formQtName: '',
          prmItemList: [
            paramsForm
          ],
        },
        typeFlag: this.treeRadio,
        typeFlagText: this.treeRadio === '0' ? "业务类型的表单" : '链接类型的表单',
        typeName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name, // 业务类型名 or 链接类型名
        viName: this.form.viName,
        viType: 0,
        viTypeText: "表格"
      }
      savePortalVI(params).then(res => {
        // console.log(params);
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          // this.closeDialog();
          this.$emit('updataTable');
          this.visible = false;
      this.$refs.form.validate((valid) => {
        if (valid) {
          const paramsForm = {...this.form};
          paramsForm.itemSelectOutFieldList = this.form.itemSelectOutFieldList.map(item => item.id); // 可使用字段
          paramsForm.itemOutFieldList = this.form.itemOutFieldList; // 需要使用字段
          paramsForm.itemSearchFieldList = this.form.itemSearchFieldList.map(item => item.id); // 可供搜索字段
          paramsForm.itemKeyFieldList = this.form.itemKeyFieldList; // 需要使用字段
          paramsForm.itemImgWH = `${this.itemImgWidth},${this.itemImgHeight}`;
          const params = {
            id: this.form.editNodeId,
            prm: {
              formQtName: '',
              prmItemList: [
                paramsForm
              ],
            },
            typeFlag: this.treeRadio,
            typeFlagText: this.treeRadio === '0' ? "业务类型的表单" : '链接类型的表单',
            typeName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name, // 业务类型名 or 链接类型名
            viName: this.form.viName,
            viType: 0,
            viTypeText: "表格"
          }
          savePortalVI(params).then(res => {
            // console.log(params);
            if (res.data.code === 200) {
              this.$message.success(res.data.obj);
              // this.closeDialog();
              this.$emit('updataTable');
              // this.$refs.form.clearValidate();
              this.visible = false;
            }
          })
        } else {
          return false;
        }
      })
      });
    }
  }
}

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

@@ -204,8 +204,9 @@
        this.$refs.formDialog.getTreeList();
      } else {
        this.$refs.tableDialog.visible = true;
        this.$refs.tableDialog.getDbList();
        this.$refs.tableDialog.getSearchSelectList();
        this.$refs.tableDialog.getDbList(); // 双击操作下拉接口
        this.$refs.tableDialog.getSearchSelectList(); // 选择表单下拉接口
        this.$refs.tableDialog.getFormSelect(); // 查询模板下拉接口
      }
    },

@@ -329,14 +330,18 @@
            // 更新表单
            this.$refs.tableDialog.form = {
              ...prmItem,
              itemFieldWidthList:prmItem.itemFieldWidthList.map(item => {
                return{
                  ...item,
                  $cellEdit: true,
                }
              }),
              viName: res.data.obj.viName,
              editNodeId: row.id,
              itemOutFieldList: (prmItem.itemOutFieldList || []).map(item => ({id: item})),
              itemOutFieldList: (prmItem.itemOutFieldList || []),
              itemSearchFieldList: (prmItem.itemSearchFieldList || []).map(item => ({id: item})),
              itemKeyFieldList: (prmItem.itemKeyFieldList || []).map(item => ({id: item})),
              searchLabel: prmItem.itemSeniorQueryCols || '',
              searchNumber: prmItem.itemSeniorQueryColsCounts || '1',
              searchSql: prmItem.itemQuerySql || '',
              itemKeyFieldList: (prmItem.itemKeyFieldList || []),
              searchNumber: '1',
              itemFileWidthSelect: (prmItem.itemFieldWidthList && prmItem.itemFieldWidthList.length > 0) ? prmItem.itemFieldWidthList[0].key : '',
              itemWidth: (prmItem.itemFieldWidthList && prmItem.itemFieldWidthList.length > 0) ? prmItem.itemFieldWidthList[0].value : '250'
            };
@@ -345,9 +350,6 @@
            const [width = '0', height = '0'] = (prmItem.itemImgWH || '0,0').split(',');
            this.$refs.tableDialog.itemImgWidth = width;
            this.$refs.tableDialog.itemImgHeight = height;

            // 双击操作获取数据方法
            this.$refs.tableDialog.getDbList();

            // 显示对话框
            this.$refs.tableDialog.visible = true;

 Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue

@@ -996,6 +996,7 @@
        this.$message.error('请选择一条数据');
        return;
      }
      console.log(this.selectList);
      this.btnDesignVisible = true;
      this.formBtnOid = this.selectList[0].id;
      this.getTabBtnTree();
@@ -1121,7 +1122,8 @@
      const params = this.saveType === 'add' ? {
        ...this.basicForm,
        parentId: this.nodeTreeRow.oId === 'parentNode' ? '' : this.nodeTreeRow.parentId,
        buttonParams: bottomParams
        buttonParams: bottomParams,
        tableOId:this.selectList[0].id
      } : {
        ...this.basicForm,
        buttonParams: bottomParams