移动端表单模块下拉框界面

zkqy-ui/src/views/asEditor/components/rightslider/investigatestyle/index.vue

@@ -74,28 +74,381 @@
         <el-select
           v-model="item.type"
           placeholder="请选择显示格式"
-          @change="conChange(index)"
+          @change="conChange"
         >
           <el-option
+            v-for="(item, index) in selecttext"
             :label="item"
             :value="index"
-            v-for="(item, index) in selecttext"
             :key="index"
           ></el-option>
         </el-select>
 
+        <!-- 动态显示按钮 -->
+        <div v-if="showButtons">
+          <el-button @click="onClickStatic">静态数据</el-button>
+          <el-button @click="onClickDynamic">动态数据</el-button>
+        </div>
+
+        <!-- 静态数据输入框 -->
+        <div v-if="showStaticInput">
+            <el-form-item
+              v-for="(domain, index) in dynamicValidateForm.domains"
+              :key="domain.key"
+              :prop="'domains.' + index + '.value'"
+              :rules="{
+                required: true, message: '不能为空', trigger: 'blur'
+              }"
+            >
+              <el-input v-model="domain.value" style="width: 100px; height: 30px; margin-top: 10px;margin-right: 10px;"></el-input>
+              <el-input v-model="domain.value" style="width: 100px; height: 30px;"></el-input>
+              <el-button type="danger" size="mini" icon="el-icon-delete" @click.prevent="removeDomain(domain)">删除</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="small" @click="addDomain">新增</el-button>
+            </el-form-item>
+        </div>
+
+        <!-- 动态数据输入框 -->
+        <div v-if="showDynamicInput">
+          <el-input
+            type="textarea"
+            v-model="item.value"
+            placeholder="动态数据变量名"
+            @input="onInputChange"
+            style="margin-top: 10px; margin-bottom: 10px;"
+        ></el-input>
+        </div>
+        <div v-if="shouldShowButton">
+          <el-button 
+            type="primary" 
+            icon="el-icon-edit" 
+            circle 
+            @click="isShow = true"
+          ></el-button>
+        </div>
+        <el-dialog
+          title="设置下拉选项数据"
+          :visible.sync="isShow"
+          width="50%"
+          :before-close="cancleHandler"
+        >
+        <el-form
+          ref="formDataRef"
+          :model="formData"
+          :rules="rules"
+          label-width="140px"
+        >
+          <el-row type="flex" style="flex-wrap: wrap">
+            <!-- <el-col :span="12">
+              <el-form-item label="选项数据名" prop="dynamicName">
+                <el-input
+                  v-model="formData.dynamicName"
+                  placeholder="请输入动态数据名"
+                  size="normal"
+                ></el-input>
+              </el-form-item>
+            </el-col> -->
+            <el-col :span="12">
+              <el-form-item label="表名" prop="tableName">
+                <el-select
+                  class="mr10"
+                  v-model="formData.tableName"
+                  placeholder="请选择表名"
+                  clearable
+                  filterable
+                  @change="
+                    (value) => {
+                      getFieldOptions(value);
+                    }
+                  "
+                >
+                  <el-option
+                    v-for="item in tableList"
+                    :key="item.tableName"
+                    :label="item.tableComment"
+                    :value="item.tableName"
+                  >
+                    <span class="discribe" style="float: left">{{
+                      item.tableComment
+                    }}</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px">{{
+                      item.tableName
+                    }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="描述字段(label)" prop="optLabelData">
+                <el-select
+                  v-model="formData.optLabelData"
+                  placeholder="请选择字段"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in fieldList"
+                    :key="item.fieldName"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
+                  >
+                    <span class="discribe" style="float: left">{{
+                      item.fieldDescription
+                    }}</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px">{{
+                      item.fieldName
+                    }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="值字段(value)" prop="optValueData">
+                <el-select
+                  v-model="formData.optValueData"
+                  placeholder="请选择字段"
+                  clearable
+                  filterable
+                >
+                  <el-option
+                    v-for="item in fieldList"
+                    :key="item.fieldName"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
+                  >
+                    <span class="discribe" style="float: left">{{
+                      item.fieldDescription
+                    }}</span>
+                    <span style="float: right; color: #8492a6; font-size: 13px">{{
+                      item.fieldName
+                    }}</span>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <div class="filter-table-wrap">
+                <span class="title">添加数据过滤条件</span>
+                <el-table :data="filterTableData" style="width: 100%">
+                  <el-table-column label="序号" type="index" width="50">
+                  </el-table-column>
+                  <!-- <el-table-column prop="tableName" label="表名" width="150">
+                    <template slot-scope="scope">
+                      <el-select
+                        v-model="scope.row.tableName"
+                        @change="
+                          (value) => {
+                            getFieldOptions(value, scope.row);
+                          }
+                        "
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="item in tableList"
+                          :key="item.tableName"
+                          :label="item.tableComment"
+                          :value="item.tableName"
+                        >
+                          <span style="float: left">{{ item.tableComment }}</span>
+                          <span
+                            style="float: right; color: #8492a6; font-size: 13px"
+                            >{{ item.tableName }}</span
+                          >
+                        </el-option>
+                      </el-select>
+                    </template>
+                  </el-table-column> -->
+                  <el-table-column prop="fieldName" label="字段名" width="150">
+                    <template slot-scope="scope">
+                      <el-select
+                        v-model="scope.row.fieldName"
+                        filterable
+                        clearable
+                        placeholder="请选择"
+                      >
+                        <el-option
+                          v-for="item in fieldList"
+                          :key="item.fieldName"
+                          :label="item.fieldDescription"
+                          :value="item.fieldName"
+                        >
+                          <span style="float: left">{{
+                            item.fieldDescription
+                          }}</span>
+                          <span
+                            style="float: right; color: #8492a6; font-size: 13px"
+                            >{{ item.fieldName }}</span
+                          >
+                        </el-option>
+                      </el-select>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="flagValue" label="参照值" width="100">
+                    <template slot-scope="scope">
+                      <el-button
+                        type="info"
+                        size="small"
+                        icon="el-icon-edit"
+                        @click="editFlagHandler(scope.row, scope.$index)"
+                      >
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作">
+                    <template slot-scope="scope">
+                      <el-button
+                        size="mini"
+                        type="danger"
+                        icon="el-icon-delete"
+                        @click="deleteFilterItem(scope.$index)"
+                        >删除
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+                <el-button
+                  type="primary"
+                  class="inline-large-button mb10"
+                  icon="el-icon-plus"
+                  size="mini"
+                  style="width: 100%"
+                  @click="addFilterHandler"
+                >
+                  添加条件
+                </el-button>
+              </div>
+            </el-col>
+          </el-row>
+        </el-form>
+  
+        <template #footer>
+          <span>
+            <el-button @click="cancleHandler">取消</el-button>
+            <el-button type="primary" @click="conformHandler">确认</el-button>
+          </span>
+        </template>
+      </el-dialog>
+      <el-dialog title="编辑参照值" :visible.sync="flagShow" width="30%">
+        <!-- :rules="rules" -->
+        <el-form
+          :model="flagFormData"
+          ref="flagFormDataRef"
+          label-width="100px"
+          :rules="flagRules"
+          :inline="false"
+          size="normal"
+        >
+          <el-form-item label="参照类型">
+            <el-select
+              v-model="flagFormData.flagType"
+              placeholder="请选择参照类型"
+              filterable
+            >
+              <el-option
+                v-for="item in flagTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            prop="flagValue"
+            v-show="flagFormData.flagType == 0"
+            label="自定义值"
+          >
+            <el-input v-model="flagFormData.flagValue"></el-input>
+          </el-form-item>
+          <el-form-item
+            prop="tableField"
+            v-show="flagFormData.flagType == 1"
+            label="关联表格字段"
+          >
+            <el-select
+              class="mr10"
+              v-model="flagFormData.tableField.tableName"
+              placeholder="请选择表名"
+              clearable
+              filterable
+              @change="
+                (value) => {
+                  getFieldOptions(value, flagFormData.tableField);
+                }
+              "
+            >
+              <el-option
+                v-for="item in tableList"
+                :key="item.tableName"
+                :label="item.tableComment"
+                :value="item.tableName"
+              >
+                <span style="float: left">{{ item.tableComment }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.tableName
+                }}</span>
+              </el-option>
+            </el-select>
+            <el-select
+              v-model="flagFormData.tableField.fieldName"
+              placeholder="请选择字段"
+              clearable
+              filterable
+            >
+              <el-option
+                v-for="item in flagFormData.tableField.fieldOptions"
+                :key="item.fieldName"
+                :label="item.fieldDescription"
+                :value="item.fieldName"
+              >
+                <span style="float: left">{{ item.fieldDescription }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px">{{
+                  item.fieldName
+                }}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="flagFormData.flagType == 2"
+            label="固定值"
+            size="normal"
+          >
+            <el-select
+              v-model="flagFormData.flagValue"
+              placeholder="请选择固定值"
+              filterable
+            >
+              <el-option
+                v-for="item in constFlagList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+  
+        <template #footer>
+          <span>
+            <el-button @click="flagShow = false">取消</el-button>
+            <el-button type="primary" @click="flagConfirm">确认</el-button>
+          </span>
+        </template>
+      </el-dialog>
         <el-input
           type="textarea"
           v-model="item.value"
           placeholder="提示语句如:(请输入姓名)"
-          v-if="item.type == 0"
+          v-if="item.type == 0 && item.type !== ''"
         ></el-input>
         <el-input
           type="textarea"
           v-model="item.value"
           @input="item.value1 = item.value.split('#')"
           placeholder="多项之间用‘#’逗号隔开"
-          v-else
+          v-if="item.type !== 0 && showButtons === false && showStaticInput === false && showDynamicInput === false"
         ></el-input>
       </el-form-item>
       <el-form-item>
@@ -109,7 +462,8 @@
 
 <script>
 import { mapState } from "vuex";
-import { getFormName, getListName } from "@/api/dragform/form";
+import { getFormName, getListName } from "@/api/dragform/form.js";
+import getOptionsSqlString from "@/utils/sqlString";
 
 export default {
   name: 'investigatestyle',
@@ -119,7 +473,21 @@ export default {
   
   data() {
     return {
+      isShow: false,
+      flagShow: false,
+      formSelect:{
+        tName: '',
+        tLabel: '',
+        tvalue:'',
+      },
+      dynamicValidateForm: {
+          domains: [{
+            value: ''
+          }],
+          email: '',
+        },
       formData: {
+        
         component: 'investigate',
         text: '表单模块',
         type: '2-3',
@@ -135,18 +503,150 @@ export default {
         },
       },
       selecttext: ['文本', '下拉框', '单选', '多选'],
+      showButtons: false, // 控制按钮是否显示
+      showStaticInput: false, // 控制静态数据输入框显示
+      showDynamicInput: false, // 控制动态数据输入框显示
+      shouldShowButton: false, // 控制按钮是否显示
       tableList: [],
       fieldList: [],
       index1: 0,
+      filterTableData: [
+        {
+          fieldName: "",
+          flagValue: "",
+          fieldOptions: [],
+          flagFormData: {
+            flagType: 0,
+            tableField: {
+              tableName: "",
+              fieldName: "",
+              fieldOptions: [],
+            },
+            flagValue: "",
+          },
+        },
+      ],
+      flagFormData: {
+        flagType: 0,
+        tableField: {
+          tableName: "",
+          fieldName: "",
+          fieldOptions: [],
+        },
+        flagValue: "",
+      },
+      flagTypeList: [
+        {
+          value: 0,
+          label: "自定义",
+        },
+        // {
+        //   value: 1,
+        //   label: "关联其他字段",
+        // },
+        {
+          value: 2,
+          label: "固定值",
+        },
+      ],
+      rules: {
+        tableName: [
+          { required: true, message: "请选择表格名称", trigger: "change" },
+        ],
+        optLabelData: [
+          { required: true, message: "请选择描述字段", trigger: "change" },
+        ],
+        optValueData: [
+          { required: true, message: "请选择值字段", trigger: "change" },
+        ],
+      },
+      flagRules: {
+        flagType: [
+          { required: true, message: "请选择参照值类型", trigger: "change" },
+        ],
+      },
+      constFlagList: [
+        {
+          value: "#{USERID}",
+          label: "当前用户相关数据",
+        },
+      ],
+      //树形数据
+      btnList: [
+        // {
+        //   sql: "",
+        //   echoData: "",
+        // },
+      ],
     }
   },
   mounted() {},
-
+  watch: {
+    myDynamicKey: {
+      handler(nval) {
+        this.formData.dynamicName = nval;
+        console.log(this.formData.dynamicName);
+      },
+      deep: true,
+    },
+    mySelectItem: {
+      handler(nval) {
+        // if (
+        //   nval.options.sqlData &&
+        //   nval.options.sqlData.dynamicName == nval.options.dynamicKey
+        // ) {
+        //   this.btnList = nval.options.sqlData.echoDatas.map((item) => {
+        //     return {
+        //       sql: "",
+        //       echoData: item,
+        //     };
+        //   });
+        // }
+      },
+      deep: true,
+      immediate: true,
+    },
+    myOptions: {
+      handler(nval) {
+        console.log("options", nval);
+        this.btnList = [];
+        this.reset();
+        if (nval.sqlData && nval.sqlData.dynamicName == nval.dynamicKey) {
+          this.btnList = nval.sqlData.echoDatas.map((item) => {
+            return {
+              sql: "",
+              echoData: item,
+            };
+          });
+        }
+        console.log(this.btnList);
+      },
+      deep: true,
+      immediate: true,
+    },
+    // 'formData.tableName': {
+    //   handler(nval) {
+    //     if(nval){}
+    //   }
+    // }
+  },
   computed: {
     ...mapState({
       databaseName: (state) => state.user.dataSource.databaseName,
       databaseType: (state) => state.user.dataSource.databaseType,
     }),
+    domType() {
+      return this.selectItem.type; //select  treeSelect  cascader
+    },
+    myDynamicKey() {
+      return this.dynamicKey;
+    },
+    mySelectItem() {
+      return this.selectItem;
+    },
+    myOptions() {
+      return this.options;
+    },
   },
 
   created() {
@@ -155,6 +655,183 @@ export default {
   },
 
   methods: {
+    // 添加一级回调
+    addHandler() {
+      this.btnList.push({
+        sql: "",
+        echoData: "",
+      });
+    },
+    minusHandler() {
+      this.btnList.pop();
+    },
+    reset() {
+      Object.assign(this.formData, {
+        dynamicName: "", //英文字符串
+        tableName: "",
+        optLabelData: "",
+        optValueData: "",
+      });
+      this.filterTableData = [];
+      Object.assign(this.flagFormData, {
+        flagType: 0,
+        tableField: {
+          tableName: "",
+          fieldName: "",
+          fieldOptions: [],
+        },
+        flagValue: "",
+      });
+    },
+    // 删除一条筛选条件
+    deleteFilterItem(index) {
+      this.filterTableData.splice(index, 1);
+    },
+    // 新增一条筛选条件
+    addFilterHandler() {
+      this.filterTableData.push({
+        // tableName: "",
+        fieldName: "",
+        flagValue: "",
+        fieldOptions: [],
+        flagFormData: {
+          flagType: 0,
+          tableField: {
+            tableName: "",
+            fieldName: "",
+            fieldOptions: [],
+          },
+          flagValue: "",
+        },
+      });
+    },
+    // 编辑参照回调
+    editFlagHandler(row, index) {
+      this.flagEditIndex = index;
+      this.flagFormData = JSON.parse(JSON.stringify(row.flagFormData));
+      this.flagShow = true;
+    },
+    // 确认参照回调
+    flagConfirm() {
+      this.filterTableData[this.flagEditIndex].flagFormData = JSON.parse(
+        JSON.stringify(this.flagFormData)
+      );
+      this.flagShow = false;
+    },
+    // 开始编辑回调
+    async editHandler(editIndex) {
+      await this.getAllTable();
+      // if (this.domType == "select") {
+      //   this.isShow = true;
+      // } else {
+      //   this.relateOptionShow = true;
+      // }
+      this.editIndex = editIndex;
+      let currentItem = this.btnList[editIndex];
+      console.log(currentItem, "currentItem");
+      if (currentItem?.echoData) {
+        let { formData, filterTableData, flagFormData } = JSON.parse(
+          currentItem.echoData
+        );
+        this.filterTableData = filterTableData;
+        this.formData = formData;
+
+        // this.flagFormData = flagFormData;
+      } else {
+        this.btnList[editIndex] = {
+          sql: "",
+          echoData: "",
+        };
+      }
+      this.formData.dynamicName = this.myOptions.dynamicKey;
+      if (this.formData.tableName) {
+        this.getFieldOptions(this.formData.tableName);
+      }
+      this.isShow = true;
+    },
+    // 弹窗取消回调
+    cancleHandler() {
+      this.reset();
+      this.isShow = false;
+    },
+    // 弹窗确认回调
+    conformHandler() {
+      let sql = getOptionsSqlString(this.formData, this.filterTableData);
+      // let sqlData = {};
+      // sqlData[this.formData.dynamicName] = sql;
+      let echoData = {
+        formData: {},
+        filterTableData: [],
+        // flagFormData: {},
+      };
+      Object.assign(echoData.formData, this.formData);
+      Object.assign(echoData.filterTableData, this.filterTableData);
+      // Object.assign(echoData.flagFormData, this.flagFormData);
+      echoData.filterTableData.forEach((item) => {
+        delete item.flagFormData.tableField.fieldOptions;
+      });
+      this.btnList[this.editIndex].sql = sql;
+      this.btnList[this.editIndex].echoData = JSON.stringify(echoData);
+      let sqlData = {};
+      sqlData.dynamicName = this.formData.dynamicName;
+      sqlData.sqls = this.btnList.map((item) => item.sql);
+      sqlData.echoDatas = this.btnList.map((item) => item.echoData);
+      this.$emit("setDynamicKey", sqlData);
+      this.reset();
+
+      this.isShow = false;
+    },
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    removeDomain(item) {
+        var index = this.dynamicValidateForm.domains.indexOf(item)
+        if (index !== -1) {
+          this.dynamicValidateForm.domains.splice(index, 1)
+        }
+      },
+      addDomain() {
+        this.dynamicValidateForm.domains.push({
+          value: '',
+          key: Date.now()
+        });
+      },
+    onInputChange() {
+      // 当输入框内容变化时，根据输入内容的长度决定是否显示按钮
+      this.shouldShowButton = event.target.value.trim().length > 0;
+    },
+    conChange(index) {
+      this.showButtons = this.selecttext[index] === '下拉框';
+      console.log(this.selecttext[index],888);
+      console.log(this.showButtons,999);
+      // 当切换选项时重置输入框显示状态
+      this.showStaticInput = false;
+      this.showDynamicInput = false;
+      console.log(this.datas.jsonData[index],0);
+      if (this.datas && Array.isArray(this.datas.jsonData) && this.datas.jsonData.length > index) {
+        // 确保jsonData存在且index是有效的
+        this.datas.jsonData[index].value = '';
+        this.datas.jsonData[index].value1 = [];
+      } else {
+        console.warn(`Index ${index} is out of bounds or jsonData not properly initialized.`);
+      }
+    },
+    
+    onClickStatic() {
+      this.showStaticInput = true;
+      this.showDynamicInput = false;
+    },
+    
+    onClickDynamic() {
+      this.showStaticInput = false;
+      this.showDynamicInput = true;
+    },
+
+
     // 获取所有表格
     async getAllTable() {
       let data = {
@@ -204,10 +881,10 @@ export default {
       this.datas.jsonData.splice(index, 1)
     },
     //下拉内容改变发生发生事件
-    conChange(index) {
+    /* conChange(index) {
       this.datas.jsonData[index].value = ''
       this.datas.jsonData[index].value1 = []
-    },
+    }, */
     // 列名变化回调
     changeModel() {
       console.log('列',this.datas);
@@ -261,15 +938,15 @@ export default {
     div {
       &:nth-child(2) {
         /* // flex: 1; */
-        width: 90%;
-        margin-right: 2%;
+        /* width: 90%; */
+        /* margin-right: 2%; */
         margin-bottom: 10px;
       }
-      &:nth-child(3) {
-        width: 90%;
+      /* &:nth-child(3) {
+         width: 90%; 
         
-        /* // flex: 1; */
-      }
+        / flex: 1; 
+      } */
       &:nth-child(4) {
         width: 100%;
         margin-top: 5px;