修改判断

src/components/VueFormMaking/components/Container.vue

@@ -95,7 +95,7 @@
               <!-- <div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">{{ $t('fm.config.form.title') }}</div> -->
             </el-header>
             <el-main class="config-content">
-              <widget-config v-if="widgetFormSelect!==null" v-show="configTab=='widget'" :data="widgetFormSelect" />
+              <widget-config v-if="widgetFormSelect!==null" v-show="configTab=='widget'" :form="widgetForm" :data="widgetFormSelect" />
               <!-- <form-config v-show="configTab=='form'" :data="widgetForm.config" /> -->
             </el-main>
           </el-container>

src/components/VueFormMaking/components/WidgetConfig.vue

@@ -133,54 +133,52 @@
         </template>
         <template v-else>
           <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
-            <el-radio-group v-model="data.options.defaultValue">
-              <draggable
-                tag="ul"
-                :list="data.options.options"
-                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
-                handle=".drag-item"
-              >
-                <li v-for="(item, index) in data.options.options" :key="index">
-                  <el-radio
+            <!-- <el-radio-group v-model="data.options.defaultValue"> -->
+            <!-- <el-radio
                     :label="item.value"
                     style="margin-right: 5px;"
-                  >
-                    <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
-                    <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
-                    <!-- <input v-model="item.value"/> -->
-                  </el-radio>
-                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
-                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />
-
-                </li>
-              </draggable>
+                  > -->
+            <!-- </el-radio> -->
+            <!-- </el-radio-group> -->
+            <draggable
+              tag="ul"
+              :list="data.options.options"
+              v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
+              handle=".drag-item"
+            >
+              <li v-for="(item, index) in data.options.options" :key="index">
+                <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
+                <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
+                <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
+                <!-- <input v-model="item.value"/> -->
+                <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />
 
-            </el-radio-group>
+              </li>
+            </draggable>
           </template>
 
           <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
-            <el-checkbox-group v-model="data.options.defaultValue">
-
-              <draggable
-                tag="ul"
-                :list="data.options.options"
-                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
-                handle=".drag-item"
-              >
-                <li v-for="(item, index) in data.options.options" :key="index">
-                  <el-checkbox
+            <!-- <el-checkbox-group v-model="data.options.defaultValue"> -->
+            <!-- <el-checkbox
                     :label="item.value"
                     style="margin-right: 5px;"
-                  >
-                    <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
-                    <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
-                  </el-checkbox>
-                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
-                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />
+                  > -->
+            <!-- </el-checkbox> -->
+            <!-- </el-checkbox-group> -->
+            <draggable
+              tag="ul"
+              :list="data.options.options"
+              v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
+              handle=".drag-item"
+            >
+              <li v-for="(item, index) in data.options.options" :key="index">
+                <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
+                <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
+                <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
+                <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />
 
-                </li>
-              </draggable>
-            </el-checkbox-group>
+              </li>
+            </draggable>
           </template>
 
           <template v-if="data.type === 'cascader'">
@@ -223,14 +221,18 @@
             <el-button type="text" :style="data.type === 'cascader'?{'font-size': '13px'}:{}" @click="data.type === 'cascader'?handleAddCascaderTopDialog():handleAddOption()">
               {{ $t('fm.actions.addOption') }}
             </el-button>
-            <el-button v-if="data.type == 'select'" type="text" @click="data.options.defaultValue = null">
-              重置默认值
+            <el-divider direction="vertical"></el-divider>
+            <el-button v-if="data.type == 'select'" type="text" @click="selectRelation">
+              选项关联
             </el-button>
+            <!-- <el-button v-if="data.type == 'select'" type="text" @click="data.options.defaultValue = null">
+              重置默认值
+            </el-button> -->
           </div>
         </template>
       </el-form-item>
       <!-- 默认值 -->
-      <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
+      <!-- <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'textarea' || data.type == 'input' || data.type=='rate' || data.type=='color' || data.type=='switch')" :label="$t('fm.config.widget.defaultValue')">
         <el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />
         <el-input v-if="data.type=='input'" v-model="data.options.defaultValue" />
         <el-rate v-if="data.type == 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
@@ -241,7 +243,7 @@
           :show-alpha="data.options.showAlpha"
         />
         <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue" />
-      </el-form-item>
+      </el-form-item> -->
       <!-- 显示类型 -->
       <template v-if="data.type == 'time' || data.type == 'date'">
         <el-form-item v-if="data.type == 'date'" :label="$t('fm.config.widget.showType')">
@@ -278,7 +280,7 @@
         <el-form-item :label="$t('fm.config.widget.format')">
           <el-input v-model="data.options.format" />
         </el-form-item>
-        <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="$t('fm.config.widget.defaultValue')">
+        <!-- <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="$t('fm.config.widget.defaultValue')">
           <el-time-picker
             v-if="!data.options.isRange"
             key="1"
@@ -296,7 +298,7 @@
             :arrow-control="data.options.arrowControl"
             :value-format="data.options.format"
           />
-        </el-form-item>
+        </el-form-item> -->
       </template>
       <!-- 图片上传 -->
       <template v-if="data.type=='imgupload' || data.type=='file'">
@@ -353,7 +355,7 @@
         </template>
       </template>
       <!-- 多行文本 -->
-      <template v-if="data.type==='text'">
+      <!-- <template v-if="data.type==='text'">
         <el-form-item label="文字内容">
           <el-input v-model="data.options.defaultValue" placeholder="请输入文字内容" />
         </el-form-item>
@@ -369,7 +371,7 @@
         <el-form-item label="字体属性">
           <el-input v-model="data.options.font_family" placeholder="请输入字体属性" />
         </el-form-item>
-      </template>
+      </template> -->
       <!-- 分割符 -->
       <template v-if="data.type==='divider'">
         <el-form-item label="文字内容">
@@ -388,7 +390,7 @@
             <el-radio-button label="vertical">竖</el-radio-button>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="文字大小">
+        <!-- <el-form-item label="文字大小">
           <el-input v-model="data.options.font_size" placeholder="请输入字体大小" />
         </el-form-item>
         <el-form-item label="文字颜色">
@@ -399,7 +401,7 @@
         </el-form-item>
         <el-form-item label="字体属性">
           <el-input v-model="data.options.font_family" placeholder="请输入字体属性" />
-        </el-form-item>
+        </el-form-item> -->
       </template>
 
       <template v-if="data.type==='blank'">
@@ -534,6 +536,48 @@
         <el-button type="primary" @click="operatingStatus==='add'?appendCascaderData():cascaderDialog = false">确 定</el-button>
       </span>
     </el-dialog>
+
+    <el-dialog
+      :title="selectTitle"
+      :visible.sync="selectDialog"
+      width="40%"
+      append-to-body
+    >
+      <div class="select-container" style="margin-top: -20px">
+        <p>根据选择的选项隐藏，显示其他控件。当前控件不能被关联显示。<span style="color: red;">选中的选项自动保存</span></p>
+        <el-row class="select-title">
+          <el-col :span="6">当选项为</el-col>
+          <el-col :span="18">隐藏以下控件</el-col>
+        </el-row>
+        <el-row v-for="(options, index) in data.options.options" :key="index" class="select-value">
+          <el-col :span="6">
+            <span style="line-height: 36px;">{{ options.value }}</span>
+          </el-col>
+          <el-col :span="18">
+            <el-select
+              v-model="options.relationOptions"
+              style="width: 100% !important"
+              multiple
+              clearable
+              placeholder=""
+              @change="$forceUpdate()"
+            >
+              <el-option
+                v-for="field in fieldList"
+                :key="field.value"
+                :label="field.label"
+                :disabled="field.value == data.model"
+                :value="field.value"
+              >
+              </el-option>
+            </el-select>
+          </el-col>
+        </el-row>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="selectDialog = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -545,7 +589,7 @@ export default {
     Draggable
   },
   /* eslint-disable */
-  props: ['data'],
+  props: ['form', 'data'],
   data() {
     return {
       selectTreeData: {},
@@ -559,7 +603,12 @@ export default {
         range: null,
         length: null
       },
-      headers: []
+      headers: [],
+      selectDialog: false,
+      selectTitle: '选项关联',
+      fieldList: [],
+      change: null,
+      relationOptions: [], // 对象
     }
   },
   computed: {
@@ -638,6 +687,49 @@ export default {
       this.selectTreeData = val
       this.cascaderDialog = true
     },
+    async selectRelation() {
+      this.fieldList = this.formatTemplateData(this.form)
+      const data = this.data
+      let temp = data.options.options || []
+      temp.forEach(t => {
+        // 初始化
+        if(!t.relationOptions) {
+          t.relationOptions = []
+        }
+      })
+      this.selectTitle = data.name + '- 选项关联'
+      this.selectDialog = true
+    },
+    formatTemplateData(template) {
+      this.fieldList = []
+      const templates = template.list || []
+      const optionList = []
+      templates.forEach(template => {
+        const options = {
+          label: template.name,
+          value: template.model,
+          type: template.type
+        }
+        if(template.type != 'text' && template.type != 'subform') {
+          optionList.push(options)
+        }
+        const formStructure = template.columns || []
+        if (formStructure.length > 0) {
+          let tempList = []
+          formStructure.forEach(item => {
+            let subList = item.list || []
+            subList.forEach(sub => {
+              optionList.push({
+                label: sub.name,
+                value: sub.model,
+                type: sub.type
+              })
+            })
+          })
+        }
+      })
+      return optionList
+    },
     appendCascaderData() {
       this.$refs['addTreeData'].validate((valid) => {
         if (valid) {
@@ -693,16 +785,14 @@ export default {
       }
     },
     handleAddOption() {
+      let addItem = {
+        value: this.$t('fm.config.widget.newOption') + (this.data.options.options.length + 1),
+        relationOptions: []
+      }
       if (this.data.options.showLabel) {
-        this.data.options.options.push({
-          value: this.$t('fm.config.widget.newOption'),
-          label: this.$t('fm.config.widget.newOption')
-        })
-      } else {
-        this.data.options.options.push({
-          value: this.$t('fm.config.widget.newOption')
-        })
+        addItem.label = this.$t('fm.config.widget.newOption') + (this.data.options.options.length + 1)
       }
+      this.data.options.options.push(addItem)
     },
     handleAddColumn() {
       this.data.columns.push({
@@ -785,4 +875,20 @@ export default {
     font-size: 14px;
     padding-right: 8px;
   }
+  .select-container /deep/.el-col {
+    padding: 16px 16px;
+    border: 1px solid #f0f0f0;
+  }
+  .select-container /deep/.el-col-6 {
+    margin-right: -1px;
+  }
+  .select-title {
+    background: #fafafa;
+  }
+  .select-value {
+    margin-top: -1px;
+  }
+  .select-value /deep/.el-col-6, .select-value /deep/.el-col-18 {
+    margin-top: -1px;
+  }
 </style>