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

@@ -129,7 +129,7 @@
              </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">预览</el-button>
              <el-button icon="el-icon-zoom-in" plain size="small" type="primary" @click="checkViewHandler" >预览</el-button>
            </div>
          </basic-container>
        </el-main>
@@ -408,7 +408,7 @@
      append-to-body="true"
      class="avue-dialog"
      title="表单"
      width="40%"
      width="50%"
      @close="closeCustomDialog">
      <el-form ref="form" :model="customForm" :rules="rules" label-position="left" label-width="85px">
        <el-row style="border-bottom: 1px solid #878585;padding-bottom: 10px">
@@ -436,7 +436,7 @@

          <el-col :span="12">
            <el-form-item class="rightLabel" label="显示类型">
              <el-select v-model="customForm.itemType" placeholder="请选择类型" size="mini">
              <el-select v-model="customForm.itemType" placeholder="请选择类型" size="mini" @change="customItemTypeChange">
                <el-option v-for="(item,index) in showSelectList" :key="index" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
@@ -668,6 +668,82 @@
         <el-button type="primary" @click="customSaveHandler">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :visible.sync="checkViewVisible"
      append-to-body="true"
      class="avue-dialog"
      title="预览"
      width="80%">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col v-for="(item,index) in formList" :key="index" :span="topForm.columnNumber">
            <el-form-item :class="['hiddenLabel', { 'active-border': activeItem.text === item.text }]"
                          :label="item.itemName + '：'"
                          style="padding-left: 5px" @click.native="formItemClick(item,index)">
              <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>
      </el-form>
    </el-dialog>
  </el-dialog>
</template>

@@ -695,6 +771,7 @@
  },
  data() {
    return {
      checkViewVisible: false,
      optionObj: {
        optionName: '',
        optionValue: ''
@@ -908,6 +985,7 @@
      this.activeItem = item;
      this.activeItemIndex = index;
      this.form = {...item};

      // console.log(item,index);
      this.topForm.position = index += 1;
    },
@@ -1088,10 +1166,8 @@
          prmItemList: this.formList
        },
      }
      console.log(params);
      savePortalVI(params).then(res => {
        console.log(res);
        if(res.data.code === 200){
        if (res.data.code === 200) {
          this.$message.success(res.data.obj);
          this.visible = false;
          this.closeDialog();
@@ -1110,12 +1186,14 @@
        this.$message.error('请在右侧选择数据后进行操作！');
        return;
      }
      const targetObject = this.formList.find(item => item.text === this.form.text);

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

    // 自定义组件修改显示类型
    customItemTypeChange(val) {
      if (val) {
        this.customClearFormBottom();
      }
      this.form.itemType = val;
    },

    // 自定义组件保存
@@ -1126,6 +1204,11 @@
      }
      if (!this.customForm.itemType) {
        this.$message.error('请选择显示类型');
        return;
      }
      const status = this.formList.some(item => item.text === this.customForm.text);
      if(status){
        this.$message.error('请检查是否添加相同项');
        return;
      }
      this.formList.push(this.customForm);
@@ -1148,6 +1231,13 @@
      this.form.itemListTable = this.form.itemListTxt = this.form.itemListVal = this.form.itemStyle = "";
    },

    // 自定义组件清空不同类型表单下方绑定值
    customClearFormBottom() {
      this.customOptionObj = {};
      this.customForm.itemKeyValueList = [];
      this.customForm.itemListTable = this.customForm.itemListTxt = this.customForm.itemListVal = this.customForm.itemStyle = "";
    },

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

@@ -1155,17 +1245,22 @@

    // 右侧表单应用按钮
    asideFormHandler() {
      if(!this.form.text){
        this.$message.error('请添加一条数据进行保存！');
        return;
      }
      this.formList = this.formList.map(item =>
        item.text === this.form.text ? this.form : item
      );

      this.$message.success('应用成功');
    },

    customClearFormBottom() {
      this.optionObj = {};
      this.form.itemKeyValueList = [];
      this.form.itemListTable = "";
      this.form.itemListTxt = "";
      this.form.itemListVal = "";
      this.form.itemStyle = "";
    // 预览按钮
    checkViewHandler(){
      this.checkViewVisible = true;
    }

  }
}
</script>