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

@@ -58,7 +58,64 @@
                    <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-input
                        v-if="item.itemType === 'text' ||
                         item.itemType === 'custom' ||
                         item.itemType === 'customform'||
                         item.itemType === 'hidden' ||
                         item.itemType === 'specialCharacter'"
                        v-model="item.value" :placeholder="item.text"
                        size="mini"></el-input>

                      <div v-if="item.itemType === 'textbtn'" style="display: flex;align-items: center">
                        <el-input v-model="item.value" :placeholder="item.text" size="mini"></el-input>
                        <el-button icon="el-icon-edit" plain size="mini" style="height: 28px;"
                                   type="primary"></el-button>
                      </div>

                      <el-input
                        v-if="item.itemType === 'textarea' || item.itemType === 'richtext' || item.itemType === 'webeditor'"
                        v-model="item.value"
                        :placeholder="item.text"
                        :rows="2"
                        type="textarea">
                      </el-input>

                      <el-input-number v-if="item.itemType === 'number'" v-model="item.value" :max="99999"
                                       :min="1"></el-input-number>
                      <el-input v-if="item.itemType === 'password'" v-model="input" placeholder="请输入密码"
                                show-password></el-input>
                      <el-radio v-if="item.itemType === 'radio'" v-model="item.value"></el-radio>
                      <el-checkbox v-if="item.itemType === 'checkbox'" v-model="item.value"></el-checkbox>
                      <el-select v-if="item.itemType === 'select' || item.itemType === 'multiselect'"
                                 v-model="item.value" :disabled="true" placeholder="请选择" size="mini">
                      </el-select>
                      <el-date-picker
                        v-if="item.itemType === 'date' || item.itemType === 'datetime'"
                        v-model="item.value"
                        :placeholder="item.itemType === 'date' ? '请选择日期' : '请选择日期时间'"
                        type="date">
                      </el-date-picker>

                      <el-time-select
                        v-if="item.itemType === 'time'"
                        v-model="item.value"
                        :picker-options="{
                         start: '08:30',
                         step: '00:15',
                         end: '18:30'
                         }"
                        placeholder="选择时间">
                      </el-time-select>
                      <el-button v-if="item.itemType === 'file'"
                                 v-model="item.value" plain size="mini" type="primary">
                        上传文件
                      </el-button>
                      <el-button v-if="item.itemType === 'multiFile'"
                                 v-model="item.value" plain size="mini" type="primary">
                        多文件上传
                      </el-button>

                    </el-form-item>
                  </el-col>
                </el-row>
@@ -79,14 +136,14 @@

        <el-aside width="25%">
          <basic-container>
            <div style="height: 700px; overflow-y: auto;padding-right: 10px">
            <div style="height: 660px; overflow-y: auto;padding-right: 10px">
              <h3>设置</h3>
              <el-form ref="form" :model="form" :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="form.text" placeholder="请输入使用字段" size="mini"></el-input>
                        <el-input v-model="form.text" :readonly="true" 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">必填
@@ -103,7 +160,7 @@

                  <el-col :span="12">
                    <el-form-item class="rightLabel" label="显示类型">
                      <el-select v-model="form.itemType" placeholder="请选择类型" size="mini">
                      <el-select v-model="form.itemType" placeholder="请选择类型" size="mini" @change="itemTypeChange">
                        <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label"
                                   :value="item.value"></el-option>
                      </el-select>
@@ -264,7 +321,7 @@
                    <el-form-item>
                      <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
                        <el-table
                          :data="form.itemValueList"
                          :data="form.itemKeyValueList"
                          :highlight-current-row="true"
                          :show-header="false"
                          border
@@ -334,6 +391,10 @@

              </el-form>
            </div>
            <div style="display: flex;justify-content: right">
              <el-button plain size="mini" style="margin-top: 10px" type="success" @click="asideFormHandler">应用
              </el-button>
            </div>
          </basic-container>
        </el-aside>
      </div>
@@ -353,8 +414,12 @@
        <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>
              <div style="display: flex;align-items: center">
                <div style="display: flex;align-items: center">
                  <el-input v-model="customForm.text" placeholder="请输入使用字段" size="mini"></el-input>
                  <el-button plain size="mini" style="margin-left: 3px" type="success" @click="customTextHandler">选择
                  </el-button>
                </div>
                <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">必填
@@ -513,7 +578,8 @@

        </el-row>

        <el-row style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
        <el-row v-if="customForm.itemType ? customOptionTypeStatus : true"
                style="margin-top: 10px;border-bottom: 1px solid #878585;padding-bottom: 10px">
          <h4>选项列表</h4>
          <el-col :span="12">
            <el-form-item label="名称">
@@ -531,7 +597,7 @@
            <el-form-item>
              <div style="height: 150px; width: 100%; border: 1px solid #bdbbbb;overflow-y: auto">
                <el-table
                  :data="customForm.itemValueList"
                  :data="customForm.itemKeyValueList"
                  :highlight-current-row="true"
                  :show-header="false"
                  border
@@ -582,7 +648,7 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
        <el-row v-if="customForm.itemType ? customItemStyleTypeStatus : true" style="margin-top: 10px">
          <el-col :span="24" style="height: 90px">
            <el-form-item label="附加属性">
              <el-input
@@ -599,14 +665,14 @@
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="customVisible = false">取 消</el-button>
         <el-button type="primary">确 定</el-button>
         <el-button type="primary" @click="customSaveHandler">确 定</el-button>
    </span>
    </el-dialog>
  </el-dialog>
</template>

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

export default {
@@ -620,6 +686,11 @@
    treeRadio: {
      type: String,
      default: ""
    },
    editRow: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
@@ -633,7 +704,8 @@
        optionValue: ''
      },
      customForm: {
        itemValueList: [],
        itemKeyValueList: [],
        itemCols: '1'
      },
      customLoading: false,
      customVisible: false,
@@ -732,7 +804,7 @@
      form: {},
      topForm: {
        columnNumber: 8,
        showColumn: '',
        showColumn: '3',
        viName: '',
        position: ''
      },
@@ -769,7 +841,15 @@
    itemStyleTypeStatus() {
      const types = ['hidden', 'webeditor', 'radio', 'checkbox'];
      return !types.includes(this.form.itemType); // 不展示
    }
    },
    customOptionTypeStatus() {
      const types = ['radio', 'checkbox', 'select'];
      return types.includes(this.customForm.itemType); // 展示
    },
    customItemStyleTypeStatus() {
      const types = ['hidden', 'webeditor', 'radio', 'checkbox'];
      return !types.includes(this.customForm.itemType); // 不展示
    },
  },
  created() {
    // this.getTreeList();
@@ -778,7 +858,9 @@
    // 关闭对话框
    closeDialog() {
      this.formList = [];

      this.form = {};
      this.activeItem = {};
      this.topForm.viName = "";
    },

    getTreeList() {
@@ -810,6 +892,7 @@
      const params = {
        text: data.text,
        oid: data.oid,
        itemType: 'text'
      }
      const isDuplicate = this.formList.some(item => item.text === data.text);

@@ -825,6 +908,8 @@
      this.activeItem = item;
      this.activeItemIndex = index;
      this.form = {...item};
      // console.log(item,index);
      this.topForm.position = index += 1;
    },

    // 设置显示行数
@@ -931,18 +1016,18 @@

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

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

      if (!optionObj.optionName) {
@@ -960,7 +1045,7 @@
        value: optionObj.optionValue
      };

      itemValueList.push(params);
      itemKeyValueList.push(params);
    },

    // 选项删除
@@ -983,8 +1068,103 @@
        this.$message.error('页面不能为空');
        return;
      }
      this.visible = false;
      this.$message.success('保存成功');
      this.formList = this.formList.map(item => {
        return {
          ...item,
          itemField: item.text // 将itemField赋值为text，因为忘记父组件为什么在编辑回填时把itemField赋值为text了
        };
      });
      const params = {
        id: this.editRow.id,// 修改时候必传
        typeFlag: this.treeRadio, // 业务类型0 or 链接类型1
        typeFlagText: this.treeRadio === '0' ? '业务类型的表单' : '链接类型的表单',// 业务类型显示值
        typeName: this.treeRadio === '0' ? this.TreeNodeRow.id : this.TreeNodeRow.name, // 业务类型名 or 链接类型名
        viName: this.topForm.viName, // 视图名称
        viType: 1, // 视图类型
        viTypeText: "表单", // 视图中文名称
        prm: {
          formQtName: '', // 查询模板名称
          showCols: this.topForm.showColumn,
          prmItemList: this.formList
        },
      }
      console.log(params);
      savePortalVI(params).then(res => {
        console.log(res);
        if(res.data.code === 200){
          this.$message.success(res.data.obj);
          this.visible = false;
          this.closeDialog();
        }
      })
      // this.visible = false;
      // this.$message.success('保存成功');
    },

    // 修改显示类型
    itemTypeChange(val) {
      if (val) {
        this.clearFormBottom();
      }
      if (!this.form.text) {
        this.$message.error('请在右侧选择数据后进行操作！');
        return;
      }
      const targetObject = this.formList.find(item => item.text === this.form.text);

      if (targetObject) {
        targetObject.itemType = val;
      }
      this.form.itemType = val;
    },

    // 自定义组件保存
    customSaveHandler() {
      if (!this.customForm.text) {
        this.$message.error('请选择使用字段');
        return;
      }
      if (!this.customForm.itemType) {
        this.$message.error('请选择显示类型');
        return;
      }
      this.formList.push(this.customForm);
      this.customVisible = false;
    },

    // 自定义对话框关闭
    closeCustomDialog() {
      this.customForm = {
        itemKeyValueList: [],
        itemType: 'text',
        itemCols: '1'
      };
    },

    // 清空不同类型表单下方绑定值
    clearFormBottom() {
      this.optionObj = {};
      this.form.itemKeyValueList = [];
      this.form.itemListTable = this.form.itemListTxt = this.form.itemListVal = this.form.itemStyle = "";
    },

    // 自定义表单使用字段选择
    customTextHandler() {

    },

    // 右侧表单应用按钮
    asideFormHandler() {

    },

    customClearFormBottom() {
      this.optionObj = {};
      this.form.itemKeyValueList = [];
      this.form.itemListTable = "";
      this.form.itemListTxt = "";
      this.form.itemListVal = "";
      this.form.itemStyle = "";
    }
  }
}