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

@@ -9,35 +9,36 @@
    width="60%"
    @close="closeDialog"
  >
    <el-form :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"
             size="small">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称">
            <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
          <el-form-item label="名称" prop="viName">
            <el-input v-model="form.viName" placeholder="请输入名称"></el-input>
          </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.itemPageSize" placeholder="请输入每页行数" type="number"></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.itemAddFilter" placeholder="请输入查询条件"></el-input>
          </el-form-item>
        </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.region" placeholder="请选择活动区域" size="mini">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              <el-select v-model="form.itemInObj" clearable placeholder="请选择绑定表单"
                         @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">选择</el-button>

            </div>
          </el-form-item>
        </el-col>
@@ -45,146 +46,69 @@
        <el-col :span="12">
          <el-form-item label="父名称">
            <div style="display: flex;align-items: center;">
              <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.itemParentFolderName" placeholder="请输入父名称"></el-input>
              <el-checkbox v-model="form.itemIsNavigatorExpand" style="margin-left: 5px; margin-right: 5px">显示查询区域
              </el-checkbox>
              <el-checkbox v-model="form.itemIsShowFolder" style="margin-left: 5px;margin-right: 0px">显示文件夹
              </el-checkbox>
            </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="showLifeTable"
                  style="width: 100%">
                  <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"></el-button>
                <el-button circle icon="el-icon-right"></el-button>
              </div>
              <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="showRightTable"
                  style="width: 100%">
                  <el-table-column
                    align="center"
                    label="需要使用字段"
                    prop="id">
                  </el-table-column>
                </el-table>
              </div>
            </div>
        <el-col :span="24">
          <el-form-item label="显示字段" prop="showLabel">
            <el-drag-select v-model="form.itemOutFieldList" multiple placeholder="请选择" style="width:100%;" @outFileChange="outFileChange">
              <el-option v-for="(item,index) in form.itemSelectOutFieldList" :key="index" :label="item.id"
                         :value="item.id"/>
            </el-drag-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
        <el-col :span="24">
          <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="searchLifeTable"
                  style="width: 100%">
                  <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"></el-button>
                <el-button circle icon="el-icon-right"></el-button>
              </div>
              <div style="height: 260px; width: 160px; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="searchRightTable"
                  style="width: 100%">
                  <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.region" placeholder="请选择列" size="mini">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            <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-col :span="12">
          <el-form-item label="宽度">
            <div style="display: flex;align-items: center;">
              <el-input v-model="user" placeholder="请输入内容" size="mini" style="width: 193px"></el-input>
              <el-button plain size="mini" style="margin-left: 3px" type="success">设置</el-button>
            </div>
          </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="columnWidthData"
              :highlight-current-row="true"
              border
              stripe
              style="width: 100%">
              <el-table-column
                align="center"
                label="列名"
                prop="id">
                <template slot-scope="scope">
                  <el-tag size="medium">{{ scope.row.id }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="列宽"
                prop="width">
                <template slot-scope="scope">
                  <el-tag size="medium">{{ scope.row.width }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <avue-crud
            :data="form.itemFieldWidthList"
            :option="fileWidthOption">
          </avue-crud>

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

      <el-col :span="8">
        <el-form-item label="查询字段">
          <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
          <el-input v-model="form.searchLabel" placeholder="请输入查询字段" size="mini"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="查询次数">
          <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
          <el-input v-model="form.searchNumber" placeholder="请输入查询次数" size="mini"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="查询sql">
          <div style="display: flex;align-items: center">
            <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
            <el-button plain size="mini" style="margin-left: 3px" type="success">添加</el-button>
            <el-button plain size="mini" style="margin-left: 3px" type="danger">删除</el-button>
            <el-input v-model="form.searchSql" placeholder="请输入sql" size="mini"></el-input>
            <el-button plain size="mini" style="margin-left: 3px" type="success" @click="searchAddClickHandler">添加
            </el-button>
            <el-button plain size="mini" style="margin-left: 3px" type="danger" @click="searchDelClickHandler">删除
            </el-button>
          </div>
        </el-form-item>
      </el-col>
@@ -193,33 +117,34 @@
        <el-form-item label="查询字段">
          <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
            <el-table
              :data="columnSearchData"
              :data="form.itemSeniorQueryBOS"
              :highlight-current-row="true"
              border
              stripe
              style="width: 100%">
              style="width: 100%"
              @row-click="itemSeniorRowClick">
              <el-table-column
                align="center"
                label="查询字段"
                prop="id">
                prop="itemSeniorQueryCols">
                <template slot-scope="scope">
                  <el-tag size="medium">{{ scope.row.id }}</el-tag>
                  <el-tag size="medium">{{ scope.row.itemSeniorQueryCols }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="查询次数"
                prop="name">
                prop="itemSeniorQueryColsCounts">
                <template slot-scope="scope">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  <el-tag size="medium">{{ scope.row.itemSeniorQueryColsCounts }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="查询sql"
                prop="sql">
                prop="itemQuerySql">
                <template slot-scope="scope">
                  <el-tag size="medium">{{ scope.row.sql }}</el-tag>
                  <el-tag size="medium">{{ scope.row.itemQuerySql }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
@@ -229,9 +154,9 @@

      <el-col :span="24">
        <el-form-item 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.itemDbl" placeholder="请选择双击操作">
            <el-option v-for="(item,index) in itemDblList" :key="index" :label="item.value"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
@@ -241,11 +166,11 @@
          <div style="display: flex;align-items: center">
            <div style="display: flex;align-items: center;width: 100%;">
              <span>长：</span>
              <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
              <el-input v-model="itemImgHeight" placeholder="请输入长度"></el-input>
            </div>
            <div style="display: flex;align-items: center;width: 100%;margin-left: 30px">
              <span>宽：</span>
              <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
              <el-input v-model="itemImgWidth" placeholder="请输入宽度"></el-input>
            </div>
          </div>
        </el-form-item>
@@ -253,83 +178,387 @@

      <el-col :span="12">
        <el-form-item label="字符串截取">
          <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
          <el-input v-model="form.itemCut" placeholder="请输入字符串" size="mini"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="超链接">
          <el-input v-model="user" placeholder="请输入内容" size="mini"></el-input>
          <el-input v-model="form.itemHrefConf" placeholder="请输入超链接" size="mini"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item 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.itemQtName" placeholder="请选择查询模板">
            <el-option v-for="(item,index) in searchQtNameList" :key="index" :label="item.qtName"
                       :value="item.qtName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-form>

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

</template>

<script>
import basicOption from "@/util/basic-option";
import {gridPortalVIDatas, getPortalVIById, getItemDblList, savePortalVI, getObjTypeQTs} from "@/api/UI/formDefine/api";
import func from "@/util/func";
import ElDragSelect from './DragSelect'

export default {
  name: "tableDialog",
  components: {ElDragSelect},
  props: {
    TreeNodeRow: {
      type: Object,
      default: () => {
      }
    },
    treeRadio: {
      type: String,
      default: ""
    }
  },
  created() {
    // this.getDbList();
  },
  data() {
    return {
      columnSearchData: [
        {
          id: 'test',
          name: '3',
          sql: 'xxxxx'
        }
      ],
      columnWidthData: [
        {
          id: 'test',
          width: '250'
        }
      ],
      searchLifeTable: [],
      searchRightTable: [],
      showRightTable: [],
      showLifeTable: [
        {
          id: 'test1'
        },
        {
          id: 'test2'
        },
        {
          id: 'test1'
        },
        {
          id: 'test2'
        },
        {
          id: 'test1'
        },
        {
          id: 'test2'
        }
      ],
      rules: {},
      form: {},
      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: '',
      itemImgWidth: '',
      itemSeniorRow: {},
      itemDblList: [],
      selectFormOption: {
        ...basicOption,
        addBtn: false,
        menu: false,
        refreshBtn: false,
        column: [
          {
            label: '业务名称',
            prop: 'typeName',

          },
          {
            label: '名称',
            prop: 'viName',
            sortable: true,
          },
          {
            label: '类型',
            prop: 'viTypeText',
          },
        ]
      },
      selectFormData: [],
      selectFormLoading: false,
      selectFormVisible: false,
      rules: {
        viName: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }],
        itemInObj: [{
          required: true,
          message: '请选择绑定表单',
          trigger: 'change'
        }],
        // showLabel: [{
        //   required: true,
        //   message: '请选择显示字段',
        //   trigger: 'submit'
        // }],
      },
      form: {
        viName: '', // 名称
        itemPageSize: '', // 每页可显示行数
        itemAddFilter: '', // 附加查询条件
        itemInObj: '', // 绑定表单
        itemParentFolderName: '', // 父名称
        itemIsShowFolder: false, // 是否显示文件夹
        itemIsNavigatorExpand: false, // 显示查询区域
        itemSelectOutFieldList: [], // 可使用字段
        itemOutFieldList: [], // 需要使用字段 // 列下拉框
        itemSearchFieldList: [], // 可供搜索使用字段
        itemKeyFieldList: [], // 需要搜索字段
        itemWidth: '250', // 宽度
        itemFieldWidthList: [], // 设置列宽数组 与 itemOutFieldList 相匹配
        searchLabel: '', // 查询字段
        searchNumber: '1', // 查询次数
        searchSql: '', // 查询sql
        itemSeniorQueryBOS: [], // 查询字段列表
        itemDbl: [], // 双击操作
        itemImgWH: '', // 图片宽高 w,h
        itemCut: '', // 字符串截取
        itemHrefConf: '', // 超链接
        itemQtName: '', // 查询模板
      },
      defaultForm: {
        viName: '', // 名称
        itemPageSize: '', // 每页可显示行数
        itemAddFilter: '', // 附加查询条件
        itemInObj: '', // 绑定表单
        itemParentFolderName: '', // 父名称
        itemIsShowFolder: false, // 是否显示文件夹
        itemIsNavigatorExpand: false, // 显示查询区域
        itemSelectOutFieldList: [], // 可使用字段
        itemOutFieldList: [], // 需要使用字段 // 列下拉框
        itemSearchFieldList: [], // 可供搜索使用字段
        itemKeyFieldList: [], // 需要搜索字段
        itemWidth: '250', // 宽度
        itemFieldWidthList: [], // 设置列宽数组 与 itemOutFieldList 相匹配
        searchLabel: '', // 查询字段
        searchNumber: '1', // 查询次数
        searchSql: '', // 查询sql
        itemSeniorQueryBOS: [], // 查询字段列表
        itemDbl: [], // 双击操作
        itemImgWH: '', // 图片宽高 w,h
        itemCut: '', // 字符串截取
        itemHrefConf: '', // 超链接
        itemQtName: '', // 查询模板
      },
      loading: false,
      visible: false
      visible: false,
      selectList: [],
      lastIndex: null,
      showLabelLeftRow: {},
      showLabelRightRow: {},
      searchLeftRow: {},
      searchRightRow: {},
      itemFileWidthRow: {},
      itemFileWidthChangeVal: '',
    }
  },
  methods: {
    closeDialog() {
    // 获取初始化表格里需要的默认数据
    getFormSelectList() {
      this.formLoading = 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.selectList = data;

          // 确保 this.selectList 已经赋值且不为空
          if (this.selectList && this.selectList.length > 0) {
            const param = {
              id: this.form.itemInObj,
              viType: '1'
            };

            // 发起第二个请求
            return getPortalVIById(param);
          }
        }
      }).then(res => {
        if (res.data.code === 200) {
          const data = res.data.obj.prm.prmItemList.map(item => ({
            id: item.itemField
          }));
          // 过滤出来需要使用字段 赋值给 可使用字段渲染 （使用字段由编辑接口传递）
          const list = data.filter(item =>
            !this.form.itemOutFieldList.some(outItem => outItem.id === item.id)
          );
          this.getSearchSelectList(); // 选择表单下拉接口
          this.getFormSelect(); // 查询模板下拉接口
          this.getDbList(); // 双击操作下拉接口
          this.$set(this.form, 'itemSelectOutFieldList', list);
          this.formLoading = false;
        }
      })
    },
    // 关闭对话框
    closeDialog() {
      this.visible = false;
      this.$refs.form.clearValidate();
      this.form = {...this.defaultForm};
    },

    // 获取选择表单数据
    getFormSelect() {
      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.selectList = data;
        }
      });
    },

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

      const params = {
        id: val,
        viType: '1'
      }
      getPortalVIById(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.obj.prm.prmItemList.map(item => {
            return {
              id: item.itemField
            }
          });
          this.form.itemSelectOutFieldList = data;
        }
      })
    },

    // 显示字段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',
        }
      })
    },

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

    // 获取双击操作数据
    getDbList() {
      getItemDblList().then(res => {
        if (res.data.code === 200) {
          const data = res.data.data;
          this.itemDblList = data;
        }
      })
    },

    // 查询模板表格行点击
    itemSeniorRowClick(row) {
      this.itemSeniorRow = row;
    },

    // 查询模板添加
    searchAddClickHandler() {
      if (!this.form.searchLabel) {
        this.$message.error('查询字段不能为空!');
        return;
      }
      this.form.itemSeniorQueryBOS.push({
        itemSeniorQueryCols: this.form.searchLabel,
        itemSeniorQueryColsCounts: this.form.searchNumber,
        itemQuerySql: this.form.searchSql
      });
    },

    // 查询模板删除
    searchDelClickHandler() {
      if (func.isEmptyObject(this.itemSeniorRow)) {
        this.$message.error('请选择一条数据进行删除');
        return;
      }

      this.form.itemSeniorQueryBOS = this.form.itemSeniorQueryBOS.filter(item => item.itemSeniorQueryCols != this.itemSeniorRow.itemSeniorQueryCols);
    },

    // 表格对话框保存
    dialogSaveClickHandler() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.itemOutFieldList.length <= 0) {
            this.$message.error('请选择显示字段');
            return;
          }
          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: this.form.itemQtName,
              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 => {
            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;
        }
      });
    }
  }
}
@@ -342,3 +571,4 @@
  }
}
</style>