formui-vue2-vistastory 0.1.26

package/FormUiForm.vue

@@ -0,0 +1,529 @@
+<template>
+    <div class="hf-form-ui-form" >
+<!--        <el-button type="primary" @click="$router.back(-1)"-->
+<!--                   size="mini">返回-->
+<!--        </el-button>-->
+<!--{{ruleForm}}-->
+        <!--{{ruleForm}}-->
+        <!--{{labelWidthCurrent}}-->
+        <div v-if="loadSuccess">
+            <el-form :model="ruleForm"   ref="ruleForm" style="margin-top: 10px;"
+                 :label-width="labelWidthCurrent"
+                 size="" :rules="rules" >
+
+                <!--{{formuiFields}}-->
+            <div v-for="fieldItem in formuiFields">
+                <!--{{ruleForm[fieldItem.name]}}___-->
+                <!--{{fieldItem.name}}-->
+                <span v-if="fieldItem.valueType=='HIDDEN'">
+
+                         <!--<el-input-number v-model="ruleForm[fieldItem.name]" controls-position="right" :min="-99999" :max="99999"></el-input-number>-->
+                    </span>
+                <!--<span v-else-if="getIsHide(fieldItem,ruleForm)">-->
+                    <!--&lt;!&ndash;隐藏&ndash;&gt;-->
+                <!--</span>-->
+
+                <!--:style="getIsHide(fieldItem,ruleForm)?'display: none':''"-->
+                <el-form-item
+                        :style="getIsHide(fieldItem,ruleForm)?'height:0px;display:block;position:fixed;opacity:0;':''"
+
+                        :label="fieldItem.title"
+                        :prop="fieldItem.name"
+
+                        v-else>
+<!--{{fieldItem.name}}-->
+                    <el-tooltip class="formui_notes" effect="dark" :content="fieldItem.notes" placement="top-start" v-if="fieldItem.notes">
+                        <span class="el-icon-info"></span>
+                    </el-tooltip>
+                    <!--{{fieldItem.valueType}}-->
+
+                    <span v-if="fieldItem.foreignStyleClass!='FormUiStyle'">
+                        <!--{{fieldItem.foreignStyleClass}}-->
+<!--{{fieldItem.name}}_{{ruleForm[fieldItem.name]}}-->
+                                    <!--v-bind:multiple="'DEFAULT'==fieldItem.valueType?true:false"-->
+                        <component v-bind:is="'formUiStyleSelect'"
+                                   ref="formUiStyleSelect"
+                                    v-bind:inputType="fieldItem.valueType=='CHECKBOX'?'checkbox':'select'"
+                                   v-bind:defaultLabel="'请选择'"
+                                   v-bind:required="fieldItem.required"
+                                   v-bind:fieldName="fieldItem.name"
+                                   v-bind:beanName="fieldItem.foreignStyleClass"
+                                   v-bind:fieldValue="ruleForm[fieldItem.name]"
+                                   @setFieldValue="setFieldValue"
+                        ></component>
+
+                    </span>
+                    <span v-else-if="fieldItem.foreignServiceClass!='FormUiForeignService'">
+
+                        <component v-bind:is="'formUiForeignSelect'"
+                                   :ref="'formUiForeignSelect'+fieldItem.name"
+                                     v-bind:multiple="'DEFAULT'==fieldItem.valueType?true:false"
+                                   v-bind:defaultLabel="'无'"
+                                   v-bind:fieldName="fieldItem.name"
+                                   v-bind:beanName="fieldItem.foreignServiceClass"
+                                   v-bind:fieldValue="ruleForm[fieldItem.name]"
+                                   v-bind:fieldItem="fieldItem"
+                                   v-bind:formData="ruleForm"
+                                   @setFieldValue="setFieldValue"
+                        ></component>
+
+                    </span>
+                    <!--formUiForeignSelect-->
+                    <span v-else-if="fieldItem.valueType=='INTEGER'">
+
+                         <el-input-number v-model="ruleForm[fieldItem.name]" controls-position="right" :min="-99999" :max="99999" :controls="false" ></el-input-number>
+                    </span>
+
+                    <span v-else-if="fieldItem.valueType=='PERCENT'">
+
+                         <el-input-number v-model="ruleForm[fieldItem.name]" controls-position="right" :min="-100" :max="100" :controls="false" style="width:80px;" ></el-input-number>%
+                    </span>
+                    <span v-else-if="fieldItem.valueType=='MONEY'">
+                         <el-input-number v-model="ruleFormMoney[fieldItem.name]" controls-position="right" :min="-99999" :max="99999" :controls="false"></el-input-number>
+                    </span>
+                    <span v-else-if="fieldItem.valueType=='STRING'">
+                        <el-input style="width: 100%" :placeholder="'请输入'+fieldItem.title" name="title"
+                                  v-model="ruleForm[fieldItem.name]"
+                        ></el-input>
+                    </span>
+                    <span v-else-if="fieldItem.valueType=='TEXT'">
+                        <el-input style="width: 100%" :placeholder="'请输入'+fieldItem.title" name="title"
+                                  v-model="ruleForm[fieldItem.name]"
+                                  type="textarea"
+                        ></el-input>
+                    </span>
+                    <span v-else-if="fieldItem.valueType=='DATETIME'">
+                        <el-date-picker
+                                v-model="ruleForm[fieldItem.name]"
+                                type="datetime"
+                                placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" />
+                    </span>
+
+                  <span v-else-if="fieldItem.valueType=='DATE_BEGIN'">
+                        <el-date-picker
+                          v-model="ruleForm[fieldItem.name]"
+                          type="date"
+                          placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" />
+                    </span>
+                  <span v-else-if="fieldItem.valueType=='DATE_END'">
+                        <el-date-picker
+                          v-model="ruleForm[fieldItem.name]"
+                          type="date"
+                          placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" />
+                    </span>
+
+                  <span v-else-if="fieldItem.valueType=='MONTH_BEGIN'">
+                        <el-date-picker
+                          v-model="ruleForm[fieldItem.name]"
+                          type="month"
+                          placeholder="选择日期" value-format="yyyy-MM" format="yyyy-MM" />
+                    </span>
+                  <span v-else-if="fieldItem.valueType=='MONTH_END'">
+                        <el-date-picker
+                          v-model="ruleForm[fieldItem.name]"
+                          type="month"
+                          placeholder="选择日期" value-format="yyyy-MM" format="yyyy-MM" />
+                    </span>
+
+                    <span v-else-if="fieldItem.valueType=='FILE'">
+                        <!--{{ruleForm[fieldItem.name+'Url']}}-->
+                      <span v-if="!fieldItem.fileRule">需要设置fileRule</span>
+                      <component
+                         v-else
+                         v-bind:is="'FormUiFileUpload'"
+                         v-bind:fieldName="fieldItem.name"
+                         v-bind:imageUrl="ruleForm[fieldItem.name+'Url']"
+                         v-bind:imagePath="ruleForm[fieldItem.name]"
+                         v-bind:initObj="fieldItem.name"
+                         v-bind:filesCountLimit="fieldItem.fileRule.filesCountLimit"
+                         v-bind:accept="fieldItem.fileRule.extensionNames"
+                         v-bind:limitSize="fieldItem.fileRule.fileSizeLimit"
+                         v-bind:isPreviewImg="fieldItem.fileRule.isPreviewImg"
+                         ref="ruleForm"
+                         @setFieldValue="setFieldValue">
+                        </component>
+
+                     </span>
+                  <span v-else-if="fieldItem.valueType=='RICH_TEXT'">
+                    <!--富文本编辑-->
+
+                    <div style="line-height:normal;font-size: unset;">
+                        <component
+
+                                v-bind:is="'FormUiRichText'"
+                                v-bind:fieldName="fieldItem.name"
+                                v-bind:fieldContent="ruleForm[fieldItem.name]"
+                                ref="ruleForm"
+                                @setFieldValue="setFieldValue">
+                        </component>
+
+                      <!--<quill-editor ref="myTextEditor" v-model="ruleForm[fieldItem.name]" :options="editorOption" style="" ></quill-editor>-->
+                  </div>
+                        <!--<el-date-picker-->
+                          <!--v-model="ruleForm[fieldItem.name]"-->
+                          <!--type="month"-->
+                          <!--placeholder="选择日期" value-format="yyyy-MM" format="yyyy-MM" />-->
+                    </span>
+                    <span v-else-if="fieldItem.valueType=='TAG'">
+
+                        <el-tag
+                                :key="tag"
+                                v-for="tag in ruleForm[fieldItem.name]"
+                                closable
+                                :disable-transitions="false"
+                                @close="handleClose(ruleForm[fieldItem.name],tag)">
+                          {{tag}}
+                        </el-tag>
+
+                        <el-input
+                                class="input-new-tag"
+                                v-if="inputVisible"
+                                v-model="inputValue"
+                                ref="saveTagInput"
+                                size="small"
+                                @keyup.enter.native="handleInputConfirm([fieldItem.name])"
+                                @blur="handleInputConfirm([fieldItem.name])"
+                        >
+</el-input>
+                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新标签</el-button>
+                    </span>
+                    <span v-else>
+                                {{fieldItem.valueType}}
+                    </span>
+
+
+
+                </el-form-item>
+            </div>
+
+
+            <!--<el-form-item label="账单日期" prop="returnedPlanTime">-->
+                <!--<el-date-picker-->
+                        <!--v-model="queryParams.returnedPlanTime"-->
+                        <!--ref="queryParams.returnedPlanTime"-->
+                        <!--type="datetime"-->
+                        <!--placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"/>-->
+            <!--</el-form-item>-->
+
+            <!--<el-form-item label="备注">-->
+                <!--<el-input style="width: 220px" placeholder="备注" name="remarks" v-model="queryParams.remarks"-->
+                          <!--ref="queryParams.remarks"></el-input>-->
+            <!--</el-form-item>-->
+
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('ruleForm')">{{btnTitleStr}}</el-button>
+            </el-form-item>
+
+        </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+
+  import mathUtil from './service/lib/math'
+  import formuiService from './service/formui/FormuiService'
+  import formUiStyleSelect from './widget/FormUiStyleSelect.vue'
+  import formUiForeignSelect from './widget/FormUiForeignSelect.vue'
+  import FormUiFileUpload from './widget/FormUiFileUpload.vue'
+  import FormUiRichText from './widget/FormUiRichText.vue'
+  import moment from 'moment'
+
+//  组件导入
+
+//  Quill.register('modules/eeSourceBtn', eeSourceBtn);
+
+export default {
+  name: 'FormUiForm',
+    props: ['beanName','removeFileds','ruleFormSrc','btnTitle','labelWidth'],
+    components:{FormUiFileUpload,formUiStyleSelect,formUiForeignSelect,FormUiRichText},
+    data () {
+    return {
+        labelWidthCurrent:'auto',
+        inputVisible:false,
+        inputValue:'',
+        btnTitleStr:'确定',
+        loadSuccess:false,
+//        removeFileds:[],
+        rules:{},
+        ruleForm:{},
+        ruleFormMoney:{},
+//        ruleFormTime:{},
+      formuiFields: [], // 渠道类型
+      isHaveChannel: false,
+        tt:'',
+    }
+  },
+
+  methods: {
+    onEditorChange({ editor, html, text }) {
+      this.content = html;
+    },
+      uploadImg (newimagePath, newimageUrl,name) {
+          this.ruleForm[name] = newimagePath
+          this.ruleForm[name+'Url'] = newimageUrl
+//          console.log('imagePath=' + imagePath)
+//          console.log('imageUrl=' + imageUrl)
+      },
+    // 提交
+    submitForm (formName) {
+//      console.log(this.queryParams)
+      let that = this
+
+//        alert(that.formuiFields.length)
+//        console.log(that.formuiFields)
+        for(let i=0;i< that.formuiFields.length;i++){
+          let fieldItem=that.formuiFields[i]
+//          alert(fieldItem.name)
+            if(fieldItem.valueType=='MONEY'){
+//                alert(mathUtil.methods.mul)
+              if(that.ruleFormMoney[fieldItem.name]){
+                that.ruleForm[fieldItem.name]=mathUtil.mul(that.ruleFormMoney[fieldItem.name],100)
+              }
+
+            }else if(fieldItem.valueType=='DATETIME'){
+//                alert(1)
+//                alert(that.ruleFormTime[fieldItem.name])
+//                that.ruleForm[fieldItem.name]=that.ruleFormTime[fieldItem.name]
+            }
+
+//alert(that.removeFileds+'__'+fieldItem.name)
+//                if(that.removeFileds.indexOf(fieldItem.name)!=-1){
+//                alert(fieldItem.name)
+//                    delete that.ruleForm[fieldItem.name]
+//                }
+        }
+//        alert(4444)
+//        alert(this.$refs[formName].validate())
+        try{
+            this.$refs[formName].validate((valid) => {
+//                alert(22)
+                if (valid) {
+//                    alert(33)
+                    this.$emit('submitForm', this.ruleForm)
+                }
+            })
+        }catch (e){
+            alert(e)
+        }
+
+//        return
+
+
+    },
+      setFieldValue:function (key,value) {
+        let that=this
+//          alert(key)
+          this.$set(this.ruleForm,key,value)
+
+//          多级关联参数
+          this.loadSuccess=false
+          for(let i=0;i< that.formuiFields.length;i++) {
+              let fieldItem = that.formuiFields[i]
+//              alert(0)
+              if(fieldItem.joinItems){
+//                  alert(1)
+                  for(let j=0;j<fieldItem.joinItems.length;j++){
+                      if(fieldItem.joinItems[j].parentFieldName===key){
+//                          alert(1)
+                          that.formuiFields[i].joinItems[j].value=value
+//                              console.log('formUiForeignSelect'+that.formuiFields[i].name+'<<<<')
+                          if(that.$refs['formUiForeignSelect'+that.formuiFields[i].name]){
+                              that.$refs['formUiForeignSelect'+that.formuiFields[i].name][0].updateJsonList(that.formuiFields[i].joinItems)
+
+                          }
+
+//                          that.$set(that.formuiFields[i].joinItems[j],'value',value)
+                      }
+
+                  }
+
+              }
+
+          }
+          this.loadSuccess=true
+
+          //手动验证
+//          let kv={}
+//          kv['publish']=value
+
+
+      },
+      formatTime(date){
+          return moment(date).format("YYYY-MM-DD HH:mm:ss");
+
+      },
+      setRules(){
+          let that=this
+          //表单验证对象，因为创建和编辑都需要验证，所以单独写了方法
+          let fields=this.formuiFields
+//console.log('------------------------------------1')
+          for(var i=0;i<fields.length;i++){
+              // alert(fields[i])
+              if(fields[i].required==true){
+//                  alert(fields[i].name)
+                  that.rules[fields[i].name]=[
+
+                      { required: true, message: '请输入'+fields[i].title, trigger:['blur','change'] }
+                  ]
+              }
+
+          }
+//          console.log('------------------------------------2')
+//          console.log(that.rules)
+//          return rules
+      },
+      getIsHide(fieldItem,ruleForm){
+//            alert(1)
+//          alert(fieldItem.name+'__'+11)
+          if(fieldItem.pre&&fieldItem.pre.length>0){
+              for(let i=0;i<fieldItem.pre.length;i++){
+                  if(ruleForm[fieldItem.pre[i].key]!==parseInt(fieldItem.pre[i].value)){
+//                      alert(ruleForm[fieldItem.pre[i].key]+'____'+fieldItem.pre[i].value)
+//                      alert(fieldItem.name+'__hide')
+                      return true
+                  }
+              }
+
+          }
+//          alert(fieldItem.name+'__show')
+          return false
+      },
+      handleClose(dynamicTags,tag) {
+          dynamicTags.splice(dynamicTags.indexOf(tag), 1);
+      },
+
+      showInput() {
+          this.inputVisible = true;
+//          this.$nextTick(_ => {
+//              this.$refs.saveTagInput.$refs.input.focus();
+//          });
+      },
+
+      handleInputConfirm(dynamicTags) {
+//          alert(dynamicTags)
+          let inputValue = this.inputValue;
+          if (inputValue) {
+              if(!this.ruleForm[dynamicTags]){
+                  this.ruleForm[dynamicTags]=[]
+              }
+              this.ruleForm[dynamicTags].push(inputValue);
+          }
+          this.inputVisible = false;
+          this.inputValue = '';
+      }
+  },
+
+  created () {
+//    console.log('-----------mounted-------------')
+//    let isEmpty = util.isStringEmpty(this.$route.query.channelId)
+
+      let that=this
+      if(!this.ruleFormSrc){
+        alert('未设置ruleFormSrc！')
+      }
+      if(this.btnTitle){
+          this.btnTitleStr=this.btnTitle
+      }
+      that.ruleForm=this.ruleFormSrc
+      let params={beanName:this.beanName}
+      let formuiFieldList=[]
+
+      if(this.labelWidth){
+          this.labelWidthCurrent=this.labelWidth
+      }
+//      this.ruleForm.fileImg2='formui/2021/05/31/1622449172256.jpg,formui/2021/05/31/1622449172256.jpg'
+//      this.ruleForm.fileImg2Url='http://ttest2.oss-cn-hangzhou.aliyuncs.com/formui/2021/05/31/1622449172256.jpg,http://ttest2.oss-cn-hangzhou.aliyuncs.com/formui/2021/05/31/1622449172256.jpg'
+//      this.ruleForm.dateTime =1;
+//      this.ruleForm.beginTime=122331112;
+//      this.ruleForm.beginMonth=123
+//      this.ruleForm.fileImgUrl='https://www.baidu.com/img/flexible/logo/pc/result.png';
+      formuiService.getFormuiForm(this,params,function (resp) {
+
+          for(let i=0;i<resp.formuiFields.length;i++){
+
+//              alert(resp.formuiFields[i].name+'_'+that.removeFileds)
+              if(that.removeFileds.indexOf(resp.formuiFields[i].name)==-1){
+//                  alert(11111)
+                  formuiFieldList.push(resp.formuiFields[i])
+
+                  let fieldItem=resp.formuiFields[i]
+
+                  //没有默认表单才设置默认值
+                  if(!that.ruleFormSrc && fieldItem.defaultValue){
+                      that.$set(that.ruleForm,fieldItem.name,fieldItem.defaultValue)
+//                      fieldItem.value=fieldItem.defaultValue
+                  }
+
+//                  alert(fieldItem.valueType)
+                  if(fieldItem.valueType=='DATETIME'){
+                      if(that.ruleForm[fieldItem.name]){
+                          that.$set(that.ruleForm,fieldItem.name,that.formatTime(that.ruleForm[fieldItem.name]))
+                      }
+
+                  }else if(fieldItem.valueType=='DATE_BEGIN'||fieldItem.valueType=='DATE_END'){
+                      if(that.ruleForm[fieldItem.name]){
+                          that.$set(that.ruleForm,fieldItem.name,that.formatTime(that.ruleForm[fieldItem.name]))
+                      }
+
+                  }else if(fieldItem.valueType=='MONTH_BEGIN'||fieldItem.valueType=='MONTH_END'){
+                      if(that.ruleForm[fieldItem.name]){
+                          that.$set(that.ruleForm,fieldItem.name,that.formatTime(that.ruleForm[fieldItem.name]))
+                      }
+
+                  }else if(fieldItem.valueType=='MONEY'){
+//                      console.log('111111111111111111111111'+fieldItem.name+'_'+that.ruleForm[fieldItem.name])
+//                      alert(fieldItem.name+' '+that.ruleForm[fieldItem.name]+' '+that.ruleForm)
+                      if(that.ruleForm[fieldItem.name]||that.ruleForm[fieldItem.name]===0){
+//                          that.ruleFormMoney[fieldItem.name]=mathUtil.div(that.ruleForm[fieldItem.name],100)//
+                          that.$set(that.ruleFormMoney,fieldItem.name,mathUtil.div(that.ruleForm[fieldItem.name],100))
+                      }else{
+//                          that.ruleFormMoney[fieldItem.name]=0
+                          that.$set(that.ruleForm,fieldItem.name,0)
+                          that.$set(that.ruleFormMoney,fieldItem.name,0)
+                      }
+//                        alert(that.ruleForm[fieldItem.name])
+//                      console.log('22222222222222'+fieldItem.name)
+//
+                  }
+
+              }else{
+//                  alert(resp.formuiFields[i].name)
+              }
+          }
+
+         that.formuiFields= formuiFieldList;
+
+          that.setRules()
+          that.loadSuccess=true
+      })
+  },
+
+  updated () {
+//    console.log('-----------updated-------------')
+  },
+
+  destory () {
+
+  }
+}
+</script>
+
+<style scoped>
+    .formui_notes{position: absolute;left: -15px;top:5px; color: #3a87ad;}
+    .el-tag + .el-tag {
+        margin-left: 10px;
+    }
+    .button-new-tag {
+        margin-left: 10px;
+        height: 32px;
+        line-height: 30px;
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    .input-new-tag {
+        width: 90px;
+        margin-left: 10px;
+        vertical-align: bottom;
+    }
+</style>