askbot-dragon 0.7.89 → 0.7.93

package/src/components/formTemplate.vue

@@ -1,1970 +1,2525 @@
-<template>
-  <div class="media-body">
-    <div class="formClass" :class="isPhone?'remPhoneClassForm':'remCompanyClassForm'" v-if="formShow.form">
-      <div class="titleName" >
-        {{formShow.form.name}}
-      </div>
-      <div class="title-link"></div>
-      <div class="pcFormClass" v-if="isCompany">
-        <div v-for="(item) in formShow.form.formFieldRelation"
-           :key="item.formField.id"
-           :class="{notClick:disableds === true}"
-      >
-        <div v-if="item.formField.type!=='CHAT_RECORD'&&item.formField.type!=='CHANNEL'&&item.display&&item.fieldId!=='workorder_name'" class="field-item">
-          <div v-if="item.display&&item.fieldId!=='workorder_name'&&item.formField.type!=='EXPLANATION'&&item.formField.type!=='EXPLAIN'" class="field-item-name">
-            <span v-if="item.fieldId!=='workorder_description'&&item.fieldId!=='workorder_clientId'">{{item.formField.name}}</span>
-            <span v-if="item.fieldId==='workorder_description'">问题描述</span>
-            <span v-if="item.fieldId==='workorder_clientId'">报单人</span>
-            <span style="color: red;padding-left: 5px" v-if="item.required===true">*</span>
-          </div>
-          <el-input v-model=item.value
-                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
-                    :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
-                    v-if="item.formField.type==='INPUT'&&item.fieldId!=='workorder_name'"
-          ></el-input>
-          <div v-if="item.formField.type==='EXPLANATION'">
-            <div class="explanation">
-              <p class="explanation-p">
-                <span class="el-icon-info"></span>
-                {{item.formField.extInfo.descriptionText}}
-              </p>
-            </div>
-          </div>
-          <div v-if="item.formField.type==='EXPLAIN'">
-            <div  class="explanation">
-              <p class="explanation-p">
-                <span class="el-icon-info"></span>
-                <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
-                <span v-else>{{item.value}}</span>
-              </p>
-            </div>
-          </div>
-          <el-input type="textarea" :rows="2" v-model=item.value
-                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
-                    :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
-                    v-if="item.formField.type==='TEXTAREA'&& item.display&&item.fieldId!=='workorder_description'"
-          ></el-input>
-          <ckeditor
-              :editor="ckeditor.editor"
-              v-model="item.value"
-              :config="ckeditor.editorConfig"
-              v-else-if="item.display&&item.fieldId==='workorder_description'"
-          ></ckeditor>
-          <el-date-picker
-                  v-model=item.value
-                  type="date"
-                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
-                  style="width: 100%"
-                  v-if="item.formField.type==='DATE_PICKER'"
-          >
-          </el-date-picker>
-          <el-time-picker
-                  v-model=item.value
-                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
-                  style="width: 100%"
-                  v-if="item.formField.type==='TIME_PICKER' && !item.formField.extInfo.mold"
-          >
-          </el-time-picker>
-          <el-date-picker
-                  v-model=item.value
-                  type="date"
-                  style="width: 100%"
-                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
-                  v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA'"
-          >
-          </el-date-picker>
-          <el-date-picker
-                  v-model=item.value
-                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期时间'"
-                  clearable
-                  style="width: 100%"
-                  type="datetime"
-                  v-if="item.formField.type==='TIME_PICKER' &&item.formField.extInfo.mold==='DATA_TIME'"
-          >
-          </el-date-picker>
-          <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.options">
-            <el-radio-group v-model=item.value style="text-align:left">
-              <el-radio v-for="(items,index) in item.formField.extInfo.options" :label=items.value  :key="index">{{items.label}}</el-radio>
-            </el-radio-group>
-          </div>
-          <div v-if="item.formField.type==='RADIO' &&item.formField.extInfo.option">
-            <el-radio-group v-model=item.value style="text-align:left">
-              <el-radio v-for="(items,index) in item.formField.extInfo.option" :label=items.value  :key="index">{{items.label}}</el-radio>
-            </el-radio-group>
-          </div>
-          <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.option">
-            <el-checkbox-group v-model=item.value style="text-align:left">
-              <el-checkbox
-                      v-for="(items,index) in item.formField.extInfo.option"
-                      :label=items.value
-                      :key="index"
-              >{{items.label}}</el-checkbox>
-            </el-checkbox-group>
-          </div>
-          <div v-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.options">
-            <el-checkbox-group v-model=item.value style="text-align:left">
-              <el-checkbox
-                      v-for="(items,index) in item.formField.extInfo.options"
-                      :label=items.value
-                      :key="index"
-              >{{items.label}}</el-checkbox>
-            </el-checkbox-group>
-          </div>
-          <div v-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" >
-            <el-select
-                    v-model=item.value
-                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
-                    style="width: 100%"
-                    filterable
-                    v-if="item.formField.extInfo && item.formField.extInfo.option"
-            >
-              <el-option
-                      v-for="(items,index) in item.formField.extInfo.option"
-                      :key="index"
-                      :label="items.label"
-                      :value="items.value">
-              </el-option>
-            </el-select>
-            <el-select
-                    v-model=item.value
-                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
-                    style="width: 100%"
-                    filterable
-                    v-else-if="item.formField.extInfo && item.formField.extInfo.options"
-            >
-              <el-option
-                      v-for="(items,index) in item.formField.extInfo.options"
-                      :key="index"
-                      :label="items.label"
-                      :value="items.value">
-              </el-option>
-            </el-select>
-          </div>
-          <div v-if="item.formField.type==='CASCADER'">
-            <el-cascader
-                    v-model=item.value
-                    :options=item.formField.extInfo.cascade
-                    style="width: 100%;"
-                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
-                    v-if="item.formField.extInfo.cascade"
-            ></el-cascader>
-            <el-cascader
-                    v-model=item.value
-                    :options=item.formField.extInfo.cascadeDown[0].options
-                    style="width: 100%;"
-                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
-                    v-else-if="item.formField.extInfo.cascadeDown"
-            ></el-cascader>
-          </div>
-          <div v-if="item.formField.type==='FILE'">
-            <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" @mouseover="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" style="flex: 0.75;display:flex;align-items: center;">
-              <el-upload
-                      class="upload-demo"
-                      ref="upload"
-                      list-type="picture-card"
-                      accept="image/*"
-                      name="file"
-                      action="/open/media/file/upload"
-                      :multiple="item.formField.extInfo&&item.formField.extInfo.limitNum&&item.formField.extInfo.limitNum>1?true:false"
-                      :file-list="fileListList[item.fieldId]"
-                      :limit=item.formField.extInfo.limitNum?Number(item.formField.extInfo.limitNum):1
-                      :before-upload="beforeAvatarUpload"
-                      :on-exceed="exceedUpload"
-                      :on-remove="handleRemove"
-                      :http-request="aliyunOssRequest"
-                      :on-change="handleEditChange"
-                      :on-success="successUpload"
-              >
-                <i  class="el-icon-plus"></i>
-              </el-upload>
-            </div>
-          </div>
-        </div>
-      </div>
-      </div>
-      <div class="mobileFormClass" v-else style="padding: 10px 0;" :class="{notClick:disableds === true}">
-        <div v-for="(item,index) in formFieldRelation"
-           :key="item.formField.id"
-           class="form-field-item"
-      >
-        <div v-if="item.formField.type==='INPUT'"  class="form-field-item-value">
-          <van-field v-model=item.value
-                     :label=item.formField.name
-                     :required="item.required===true"
-                     :disabled="disableds"
-                     :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
-                     :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
-          />
-        </div>
-        <div v-else-if="item.formField.type==='EXPLANATION'||item.formField.type==='EXPLAIN'" class="explan-ation">
-          <div  class="explanation">
-            <p  class="explanation-p" v-if="item.formField.type==='EXPLANATION'">
-              <span class="el-icon-info"></span>
-              {{item.formField.extInfo.descriptionText}}
-            </p>
-            <p v-else class="explanation-p">
-              <span class="el-icon-info"></span>
-              <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
-              <span v-else>{{item.value}}</span>
-            </p>
-          </div>
-        </div>
-        <div v-else-if="item.formField.type==='TEXTAREA'" class="form-field-item-value">
-          <van-field v-model=item.value
-                     :label=item.formField.name
-                     :required="item.required===true"
-                     type="textarea"
-                     :disabled="disableds"
-                     :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
-                     :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
-                     v-if="item.fieldId!=='workorder_description'"
-          />
-          <div v-if="item.fieldId==='workorder_description'" class="workorder_description">
-            <div class="field-name" :class="item.required?'required-name':''">
-              <span v-if="item.required" style="color: red">*</span>
-              {{item.formField.name}}
-            </div>
-            <ckeditor
-                :editor="ckeditor.editor"
-                v-model="item.value"
-                @onReady="onReady"
-                :config="ckeditor.editorConfig"
-            ></ckeditor>
-          </div>
-        </div>
-        <div v-else-if="item.formField.type==='DATE_PICKER'" class="form-field-item-value">
-          <van-field
-              readonly
-              clickable
-              name="calendar"
-              :value=dateValue[item.fieldId]
-              :label=item.formField.name
-              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
-              :required="item.required===true"
-              @click="dateClick(item.fieldId)"
-              :disabled="disableds"
-              right-icon="van-icon van-icon-arrow van-cell__right-icon"
-          />
-          <van-calendar
-              v-model="showCalendar"
-              @confirm="onConfirmCalendar($event,dateId)"
-          />
-        </div>
-        <div v-else-if="item.formField.type==='TIME_PICKER'&&(!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME')" class="form-field-item-value">
-          <van-field
-              readonly
-              clickable
-              name="datetimePicker"
-              :required="item.required===true"
-              :value=timeValue[item.fieldId]
-              :label=item.formField.name
-              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
-              @click="timeClick(item.fieldId,item)"
-              :disabled="disableds"
-              right-icon="van-icon van-icon-arrow van-cell__right-icon"
-
-          />
-          <van-popup v-model="showTimePicker" position="bottom">
-            <van-datetime-picker
-                v-model="currentDate"
-                type="datetime"
-                @confirm="onConfirm($event,timeId,item)"
-                @cancel="showTimePicker = false"
-                :min-date="minDate"
-                :formatter="formatter"
-                :max-date="maxDate"
-            />
-          </van-popup>
-        </div>
-        <div v-else-if="item.formField.type==='TIME_PICKER'&&item.formField.extInfo.mold==='DATA'" class="form-field-item-value">
-          <van-field
-              readonly
-              clickable
-              name="datetimePicker"
-              :required="item.required===true"
-              :value=timeValue[item.fieldId]
-              :label=item.formField.name
-              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
-              @click="timeClick(item.fieldId,item)"
-              :disabled="disableds"
-              right-icon="van-icon van-icon-arrow van-cell__right-icon"
-
-          />
-          <van-calendar v-model="showTimePickerd" :show-confirm="false" @confirm="onConfirm($event,timeId,item)"  @cancel="showTimePickerd = false"/>
-        </div>
-        <div v-else-if="item.formField.type==='RADIO'" class="form-field-item-other">
-          <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds"  v-if="item.formField.extInfo.option">
-            <template #input style="display: flex;align-items: center">
-              <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
-                <van-radio v-for="(items,index) in item.formField.extInfo.option"  :name=items.value :key="index">{{items.label}}</van-radio>
-              </van-radio-group>
-            </template>
-          </van-field>
-          <van-field name="radio" :label="item.formField.name" :required="item.required===true" :disabled="disableds"  v-if="item.formField.extInfo.options">
-            <template #input style="display: flex;align-items: center" >
-              <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
-                <van-radio v-for="(items,index) in item.formField.extInfo.options"  :name=items.value :key="index">{{items.label}}</van-radio>
-              </van-radio-group>
-            </template>
-          </van-field>
-        </div>
-        <div v-else-if="item.formField.type==='CHECKBOX'" class="form-field-item-other">
-          <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.option">
-            <template #input style="display: flex;align-items: center" >
-              <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
-                <van-checkbox
-                    v-for="(items,index) in item.formField.extInfo.option"
-                    shape="square"
-                    :key="index"
-                    :name=items.value>
-                  {{items.label}}
-                </van-checkbox>
-              </van-checkbox-group>
-            </template>
-          </van-field>
-          <van-field name="checkbox" :label=item.formField.name :required="item.required===true" :disabled="disableds" v-if="item.formField.extInfo.options">
-            <template #input style="display: flex;align-items: center" >
-              <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
-                <van-checkbox
-                    v-for="(items,index) in item.formField.extInfo.options"
-                    shape="square"
-                    :key="index"
-                    :name=items.value>
-                  {{items.label}}
-                </van-checkbox>
-              </van-checkbox-group>
-            </template>
-          </van-field>
-        </div>
-        <div v-else-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" class="form-field-item-value">
-          <van-field
-              readonly
-              clickable
-              name="picker"
-              :value=selectValues[item.fieldId]
-              :label=item.formField.name
-              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
-              @click="selectClick(item.fieldId)"
-              :required="item.required===true"
-              :disabled="disableds"
-              @click-right-icon.stop="SelectClear(item.fieldId)"
-              v-if="item.fieldId!=='workorder_clientId'"
-              :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
-          />
-          <van-field
-              readonly
-              clickable
-              name="picker"
-              :value=selectValues[item.fieldId]
-              label='报单人'
-              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
-              @click="selectClick(item.fieldId)"
-              :required="item.required===true"
-              :disabled="disableds"
-              @click-right-icon.stop="SelectClear(item.fieldId)"
-              v-if="item.fieldId==='workorder_clientId'"
-              :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
-          />
-          <van-popup v-model="showPicker" position="bottom">
-            <van-picker
-                show-toolbar
-                :columns=selectValue
-                @confirm="onConfirmSelect($event,selectId)"
-                @cancel="showPicker = false"
-                :key="selectKey"
-
-            />
-          </van-popup>
-        </div>
-        <div v-else-if="item.formField.type==='CASCADER'" class="form-field-item-value">
-          <van-field
-              readonly
-              clickable
-              name="area"
-              :value=cascadeValue[item.fieldId]
-              :label=item.formField.name
-              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
-              @click="pickerClick(item.fieldId)"
-              :required="item.required===true"
-              :disabled="disableds"
-              right-icon="van-icon van-icon-arrow van-cell__right-icon"
-          />
-
-          <van-popup v-model="showArea" position="bottom">
-            <van-picker v-if="pageShow"
-                        show-toolbar
-                        :columns="column"
-                        @cancel="onCancel"
-                        @confirm="onConfirms($event,pickerId,index)"
-                        @change="onChange"
-                        :item-height="45"
-                        :key="keyValue"
-            />
-          </van-popup>
-        </div>
-        <div v-else-if="item.formField.type === 'FILE'" class="form-field-item-value">
-          <div @click="checkUpload(item.fieldId,item.formField.extInfo.limitNum)" class="form-field-item-file">
-            <div class="fileName"><span style="color: red" v-if="item.required">*</span>{{item.formField.name}}</div>
-            <van-uploader
-                v-model="fileListList[item.fieldId]"
-                :before-read="beforeRead"
-                :max-count='item.formField.extInfo&&item.formField.extInfo.limitNum?item.formField.extInfo.limitNum:1'
-                :after-read="afterRead"
-                accept="image/*"
-                :multiple="item.formField.extInfo&&item.formField.extInfo.limitNum&&item.formField.extInfo.limitNum>1?true:false"
-            >
-              <div class="vant-upload--picture-card">
-                <i  class="el-icon-plus"></i>
-              </div>
-
-            </van-uploader>
-          </div>
-        </div>
-      </div>
-        <van-popup v-model="fileUpload" :close-on-click-overlay="false">
-          <div style="background-color: black;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center" >
-           <van-loading type="spinner"/>
-          </div>
-        </van-popup>
-    </div>
-      <div class="bottom-link"></div>
-      <div class="form-submit-btn" v-if="isCompany">
-        <el-button style="border-color: #366aff;color: white;background-color: #366aff"  round class="submitClass" size="small" @click="submitClick" :disabled="disableds">
-          <i class="el-icon-check" v-if="!disableds"></i>
-          {{submitValue}}
-        </el-button>
-      </div>
-      <div class="form-submit-btn" v-else>
-        <van-button  round  type="info" class="submitClass" @click="submitClick"  :disabled="disableds">
-          <i class="el-icon-check" v-if="!disableds"></i>
-          {{submitValue}}
-        </van-button>
-      </div>
-    </div>
-    <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="">
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-/* eslint-disable */
-let that
-import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
-import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
-import MyimageUpload from './utils/plugin-image'
-import CKEDITOR from 'ckeditor'
-
-export default {
-  name: "formTemplate",
-  data() {
-    return {
-      isPhone: false,
-      isCompany: false,
-      checkboxGroup: [],
-      currentDate: new Date(),
-      timeValue: [],
-      dateValue: [],
-      showPicker: false,
-      showTimePicker: false,
-      showTimePickerd:false,
-      showCalendar: false,
-      radio: [],
-      selectValue: [],
-      pickerValue: [],
-      showArea: false,
-      dateTimeValue: [],
-      dateTimeValue1: [],
-      showDateTimePicker: false,
-      showDateTimePicker1: false,
-      pickerId: 0,
-      dateId: 0,
-      timeId: 0,
-      selectId: 0,
-      dateTimeId: 0,
-      column: [
-        {
-          values: '', // 设置的页面初始值
-          className: "column1"
-        },
-        {
-          values: '',
-          className: "column2",
-        },
-        {
-          values: '',
-          className: "column3",
-        }
-      ],
-      pageShow: false, //省市区三级联动是否显示（因为是接口返回的数据，等三级数据渲染完毕之后，在显示三级联动）
-      cityDates: '', //安联当前选中市的所有区所有数据
-      data: [],//接口返回所有级联数据
-      dateTimeRange: '',
-      selectValues: [],
-      cascadeValue: [],
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 11, 31),
-      disableds: false,
-      submitValue: '提交',
-      clickPicker: '',
-      columns: [],
-      copyForm: [],
-      cascaderId:0,
-      formShow:[],
-
-      uploadAvatarParams: {
-        token: "8c98087dfd2d48f856d8c95c09115def",
-      },
-      fileListList:[],
-      keyValue:'',
-      selectKey:'shuijiao',
-      filedId:'',
-      disabled:false,
-      dialogVisible:false,
-      dialogImageUrl:'',
-      fileUpload:false,
-      videoFlag:false,
-      videoUploadPercent:false,
-      fileType:['PICTURE','VIDEO','AUDIO'],
-      loading:'',
-      ossConfig: {
-        region: "oss-cn-zhangjiakou",
-        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
-        accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
-        accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
-        // stsToken: '<Your securityToken(STS)>',
-        bucket: "guoranopen-zjk",
-      },
-      hideUploadEdit:false,
-      limitNum:1,
-      ckeditor: {
-        editor: CKEDITOR.ClassicEditor,
-        editorConfig: {
-          extraPlugins: [MyimageUpload,MyCustomUploadAdapterPlugin],
-          toolbar: [
-            'MyimageUpload'
-          ]
-        },
-      },
-
-    }
-  },
-  props: {
-    formList: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    type:String,
-    disable:Boolean,
-    submit:Boolean,
-    usePropStyleType:{
-      type:Boolean,
-      default() {
-        return false;
-      }
-    },
-    propIsPhone: {
-      type:Boolean,
-      default() {
-        return false;
-      }
-    },
-    propIsCompany: {
-      type:Boolean,
-      default() {
-        return false;
-      }
-    },
-    uploadUrl: {
-      type:String,
-      default(){
-        return '/open/media/file/upload'
-      }
-    }
-  },
-  computed:{
-    acceptType:function () {
-      return '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF'
-    },
-    formFieldRelation:function (){
-      let arr = [];
-      this.formShow.form.formFieldRelation.forEach(item=> {
-        if (item.fieldId!=='workorder_name'&&item.display) {
-          arr.push(item);
-        }
-      })
-      return arr;
-    }
-
-  },
-  mounted() {
-    this.isMobile()
-  },
-  beforeCreate() {
-    // 等待dom渲染完毕之后，再去显示 三级联动。
-    that=this
-    this.$nextTick(function () {
-      this.pageShow = true;
-    })
-  },
-  created() {
-    if(this.disable===true)
-    {
-      this.disableds=true
-      this.submitValue = '已提交'
-    }
-    else
-    {
-      this.disableds=false
-      this.submitValue = '提交'
-    }
-  },
-  beforeMount() {
-    that.defaultClick()
-  },
-  methods: {
-    onReady(){
-      
-      
-    },
-    beforeRead(file){
-      console.debug('file',file)
-      console.debug('fileType',!Array.isArray(file))
-      if (!Array.isArray(file)){
-        const isLte2M = file.size / 1024 / 1024 <= 8;
-        const isSupportedFormat =file.type.indexOf('image')!==-1
-        if (!isSupportedFormat){
-          this.$message.error("只能上传图片格式");
-          return false
-        }
-        if (!isLte2M&&isSupportedFormat) {
-          this.$message.error("上传图片大小不能超过 8MB!");
-          return false
-        }
-        return true
-      }
-      else{
-        let length = 0
-        if (this.fileListList[this.filedId]){
-          length = this.fileListList[this.filedId].length
-        }
-        if (file.length<=this.limitNum-length){
-          for (let i=0;i<file.length;i++){
-            const isLte2M = file[i].size / 1024 / 1024 <= 8;
-            const isSupportedFormat =file[i].type.indexOf('image')!==-1
-            if (!isSupportedFormat){
-              this.$message.error("只能上传图片格式");
-              return false
-            }
-            if (!isLte2M&&isSupportedFormat) {
-              this.$message.error("上传图片大小不能超过 8MB!");
-              return false
-            }
-            return true
-          }
-        }
-        else {
-          let num = 1
-          if (this.limitNum){
-            num = this.limitNum
-          }
-          let messageText = '仅支持上传'+num+'张图片'
-          this.$message.error(messageText);
-          return false
-        }
-
-      }
-
-    },
-    //文件上传至服务器
-    afterRead(file){
-      this.fileUpload=true
-      console.debug(file)
-      console.debug(!Array.isArray(file))
-      if (!Array.isArray(file)){
-        this.uploadImgFun(file.content,file.file.name,file,file.file);
-      }
-      else {
-        let num = 1
-        if (this.limitNum){
-          num = this.limitNum
-        }
-        if (file.length >num){
-          this.$message.warning('仅支持上传'+num+'张图片')
-          return false
-        }
-        else {
-          for (let i = 0; i < file.length; i++){
-            this.uploadImgFun(file[i].content,file[i].file.name,file[i],file[i].file);
-          }
-        }
-      }
-    },
-    uploadImgFun(content,name,fileCon,file){
-      console.log(fileCon)
-      let imageData = {
-        urls:[]
-      }
-      let imageInfo = {
-        name:"",
-        status:'',
-        url:''
-      }
-      let res = multipartUpload(
-              this.ossConfig,
-              file,
-              null,
-              imageInfo
-      );
-      res.then((res) => {
-        console.log("upload result:", res);
-        // let filePath = res.name;
-        imageData.urls.push({
-          name:res.name,
-          url:ossFileUrl(this.ossConfig, res.name),
-          status:'success'
-        })
-        imageInfo.url = ossFileUrl(this.ossConfig, res.name)
-        imageInfo.status='success'
-        imageInfo.name=res.name
-        for (let j=0;j<this.fileListList[this.filedId].length;j++){
-          if (this.fileListList[this.filedId][j].content&&this.fileListList[this.filedId][j].content===content){
-            this.fileListList[this.filedId][j].name=res.name
-            this.fileListList[this.filedId][j].status='success'
-            this.fileListList[this.filedId][j].url=imageInfo.url
-            delete this.fileListList[this.filedId][j].content
-          }
-        }
-        this.fileUpload=false
-      }).catch((err) => {
-        console.debug("upload err", err);
-      });
-
-    },
-    dataURLtoFileFun (dataurl, filename) {
-      // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
-      let arr = dataurl.split(",");
-      let mime = arr[0].match(/:(.*?);/)[1];
-      let bstr = atob(arr[1]);
-      let n = bstr.length;
-      let u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new File([u8arr], filename, { type: mime });
-    },
-    //初始化默认值
-    defaultClick() {
-      for (let i = 0; i < this.formList.form.formFieldRelation.length; i++)
-      {
-        if(this.formList.form.formFieldRelation[i].formField.type ==='SELECT'||this.formList.form.formFieldRelation[i].formField.type ==='CHECKBOX' ||this.formList.form.formFieldRelation[i].formField.type==='RADIO' ||this.formList.form.formFieldRelation[i].formField.type==='OPTION')
-        {
-          if(this.formList.form.formFieldRelation[i].formField.extInfo && !this.formList.form.formFieldRelation[i].formField.extInfo.option)
-          {
-            if(this.formList.form.formFieldRelation[i].formField.extInfo.exinfo)
-            {
-              for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.exinfo.length;j++)
-              {
-                    this.$set(this.formList.form.formFieldRelation[i].formField.extInfo.exinfo[j],'label',this.formList.form.formFieldRelation[i].formField.extInfo.exinfo[j].value)
-              }
-              this.$set(this.formList.form.formFieldRelation[i].formField.extInfo,'option',this.formList.form.formFieldRelation[i].formField.extInfo.exinfo)
-            }
-            if (this.formList.form.formFieldRelation[i].formField.extInfo.option){
-              if (this.formList.form.formFieldRelation[i].formField.type === 'RADIO') {
-                for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-                  if(!this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value)
-                  {
-                    this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value=this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
-                  }
-                }
-                if(!this.formList.form.formFieldRelation[i].value)
-                {
-                  for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-                    if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
-                      this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
-                    }
-                  }
-                }
-              }
-              if (this.formList.form.formFieldRelation[i].formField.type === 'CHECKBOX') {
-                for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-                  if (!this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value) {
-                    this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
-                  }
-                }
-
-                if (!this.formList.form.formFieldRelation[i].value||this.formList.form.formFieldRelation[i].value.length === 0)
-                {
-                  this.formList.form.formFieldRelation[i].value=[]
-                  for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-                    if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
-                      this.formList.form.formFieldRelation[i].value[0] = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
-                    }
-                  }
-                }
-              }
-            }
-
-          }
-          else {
-            if (this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.options){
-              if (this.formList.form.formFieldRelation[i].formField.type === 'RADIO') {
-                for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
-                  if(!this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value)
-                  {
-                    this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value=this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
-                  }
-                }
-                if(!this.formList.form.formFieldRelation[i].value)
-                {
-                  for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-                    if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
-                      this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
-                    }
-                  }
-                }
-              }
-              if (this.formList.form.formFieldRelation[i].formField.type === 'CHECKBOX') {
-                for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
-                  if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value === '') {
-                    this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
-                  }
-                }
-
-                if (this.formList.form.formFieldRelation[i].value === null||this.formList.form.formFieldRelation[i].value.length === 0)
-                {
-                  this.formList.form.formFieldRelation[i].value=[]
-                  for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
-                    if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
-                      this.formList.form.formFieldRelation[i].value[0] = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-        }
-        if (this.formList.form.formFieldRelation[i].formField.type ==='FILE'){
-          if (this.formList.form.formFieldRelation[i].value!==undefined){
-            if (this.formList.form.formFieldRelation[i].value===null||this.formList.form.formFieldRelation[i].value===''){
-              this.formList.form.formFieldRelation[i].value=[]
-            }
-            else {
-              let valueList=[]
-              let bool=false
-              if(this.formList.form.formFieldRelation[i].value.length > 0) {
-                  for (let file=0;file<this.formList.form.formFieldRelation[i].value.length;file++) {
-                    let type = typeof (this.formList.form.formFieldRelation[i].value[file])
-                    if (type === "string") {
-                      bool = true
-                      valueList[file] = {}
-                      valueList[file].url = this.formList.form.formFieldRelation[i].value[file]
-                    }
-                    if (type === 'object'&&JSON.stringify(this.formList.form.formFieldRelation[i].value[file])!=='{}') {
-                      this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=this.formList.form.formFieldRelation[i].value
-                    }
-                    else {
-                      this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=[]
-                    }
-                  }
-                  if (bool){
-                    this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=valueList
-                  }
-              }
-            }
-          }
-
-
-
-        }
-
-      }
-      let test = []
-      for (let i = 0; i < this.formList.form.formFieldRelation.length; i++) {
-        if (this.formList.form.formFieldRelation[i].formField.type === 'CASCADER') {
-          test.push(this.formList.form.formFieldRelation[i])
-          let cascader=''
-          if(this.formList.form.formFieldRelation[i].value)
-          {
-            if(this.formList.form.formFieldRelation[i].value.length > 0)
-            {
-              for (let j = 0; j < this.formList.form.formFieldRelation[i].value.length; j++) {
-                if (this.formList.form.formFieldRelation[i].value[j]) {
-                  cascader += this.formList.form.formFieldRelation[i].value[j] + '/'
-                }
-              }
-              cascader = cascader.substr(0, cascader.length - 1)
-
-            }
-            this.cascadeValue[this.formList.form.formFieldRelation[i].fieldId]=cascader
-          }
-          else
-          {
-            this.formList.form.formFieldRelation[i].value=[]
-          }
-        }
-        if (this.formList.form.formFieldRelation[i].formField.type === 'DATE_PICKER')
-        {
-          if(this.formList.form.formFieldRelation[i].value!==null && this.formList.form.formFieldRelation[i].value!=='' )
-          {
-
-            this.dateValue[this.formList.form.formFieldRelation[i].fieldId]=this.formatDate(this.formList.form.formFieldRelation[i].value)
-          }
-        }
-        if (this.formList.form.formFieldRelation[i].formField.type === 'TIME_PICKER')
-        {
-          if(this.formList.form.formFieldRelation[i].value!==''&& this.formList.form.formFieldRelation[i].value!==null)
-          {
-            const dateTime = new Date(this.formList.form.formFieldRelation[i].value)
-            this.timeValue[this.formList.form.formFieldRelation[i].fieldId]=this.addZero(dateTime.getHours()) + ':' + this.addZero(dateTime.getMinutes())
-
-          }
-        }
-        if (this.formList.form.formFieldRelation[i].formField.type === 'SELECT' || this.formList.form.formFieldRelation[i].formField.type === 'OPTION') {
-          if (this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option){
-            for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-              if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value === '') {
-                this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
-              }
-            }
-            if(this.formList.form.formFieldRelation[i].value)
-            {
-              for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.option.length;j++)
-              {
-                if (this.formList.form.formFieldRelation[i].value === this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value)
-                {
-                  this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
-                }
-              }
-              /*this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].value*/
-
-            }
-            else
-            {
-              for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-                if (this.formList.form.formFieldRelation[i].formField.extInfo.option[j]._default === 'true') {
-                  this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].formField.extInfo.option[j].label
-                  this.formList.form.formFieldRelation[i].value=this.formList.form.formFieldRelation[i].formField.extInfo.option[j].value
-                }
-              }
-            }
-          }
-          else {
-            if(this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option) {
-              for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
-                if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value === '') {
-                  this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
-                }
-              }
-            }
-              if(this.formList.form.formFieldRelation[i].value && this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option)
-              {
-                for (let j=0;j<this.formList.form.formFieldRelation[i].formField.extInfo.options.length;j++)
-                {
-                  if (this.formList.form.formFieldRelation[i].value === this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value)
-                  {
-                    this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
-                  }
-                }
-                /*this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].value*/
-
-              }
-              else
-              {
-                if(this.formList.form.formFieldRelation[i].formField.extInfo && this.formList.form.formFieldRelation[i].formField.extInfo.option) {
-                  for (let j = 0; j < this.formList.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
-                    if (this.formList.form.formFieldRelation[i].formField.extInfo.options[j]._default === 'true') {
-                      this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = this.formList.form.formFieldRelation[i].formField.extInfo.options[j].label
-                      this.formList.form.formFieldRelation[i].value=this.formList.form.formFieldRelation[i].formField.extInfo.options[j].value
-                    }
-                  }
-                }
-              }
-          }
-
-        }
-      }
-      this.formShow=this.formList
-    },
-    addZero(i) {
-      if (i < 10) {
-        i = "0" + i;
-      }
-      return i;
-    },
-    formatter(type, value) {
-      // 格式化选择器日期
-      if (type === "year") {
-        return `${value}年`;
-      } else if (type === "month") {
-        return `${value}月`;
-      } else if (type === "day") {
-        return `${value}日`;
-      } else if (type === "hour") {
-        return `${value}时`;
-      } else if (type === "minute") {
-        return `${value}分`;
-      }
-      return value;
-    },
-
-    isMobile() {
-      if (this.usePropStyleType === false){
-        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
-        if (flag) {
-          this.isPhone=true
-        }
-        else {
-          this.isCompany=true
-        }
-      }else {
-        this.isPhone=this.propIsPhone;
-        this.isCompany=this.propIsCompany;
-      }
-    },
-    //时间的选择器
-    onConfirm(value, id,item) {
-      for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-        if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
-          this.formShow.form.formFieldRelation[i].value = value
-          if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
-            this.timeValue[id] =this.formatDate(value) +" "+ this.addZero(value.getHours()) + ':' + this.addZero(value.getMinutes())
-            this.showTimePicker = false;
-          }
-          else {
-            this.timeValue[id] =this.formatDate(value)
-            this.showTimePickerd = false;
-          }
-          break
-        }
-      }
-    },
-    //转换日期的函数
-    formatDate(date) {
-      const dateTime = new Date(date)
-      return `${dateTime.getFullYear()}-${dateTime.getMonth() + 1}-${dateTime.getDate()}`;
-    },
-    //日期的选择器
-    onConfirmCalendar(date, id) {
-      for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-        if (this.formShow.form.formFieldRelation[i].fieldId === id) {
-          this.dateValue[id] = this.formatDate(date)
-          this.formShow.form.formFieldRelation[i].value = date
-          this.showCalendar = false;
-          break
-        }
-      }
-    },
-    //下拉的选择器
-    onConfirmSelect(value, id) {
-      for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-        if (this.formShow.form.formFieldRelation[i].fieldId === id) {
-          this.selectValues[this.formShow.form.formFieldRelation[i].fieldId] = value
-          if (this.formShow.form.formFieldRelation[i].formField.extInfo.option){
-            for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
-              if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].label)
-              {
-                this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].value
-              }
-            }
-          }
-          else {
-            for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
-              if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].label)
-              {
-                this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].value
-              }
-            }
-          }
-
-          this.showPicker = false;
-          break
-        }
-      }
-    },
-    //时间日期的选择器
-    /* onConfirmDateTime(date,id){
-      for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
-      {
-
-        if(this.formList.form.formFieldRelation[i].formField.id===id)
-        {
-          this.dateTimeValue[id]=this.addZero(date.getFullYear())+'-'+this.addZero(date.getMonth())+'-'+this.addZero(date.getDate())+' '+this.addZero(date.getHours())+':'+this.addZero(date.getMinutes())
-          this.formList.form.formFieldRelation[i].value[0]=date
-          this.showDateTimePicker = false;
-          break
-        }
-      }
-
-    },
-    onConfirmDateTime1(date,id){
-      for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
-      {
-        if(this.formList.form.formFieldRelation[i].formField.id===id)
-        {
-
-          this.dateTimeValue1[id]=this.addZero(date.getFullYear())+'-'+this.addZero(date.getMonth())+'-'+this.addZero(date.getDate())+' '+this.addZero(date.getHours())+':'+this.addZero(date.getMinutes())
-          this.formList.form.formFieldRelation[i].value[1]=date
-          this.showDateTimePicker1 = false;
-          break
-        }
-      }
-    },*/
-    //提交按钮事件
-    submitClick() {
-
-      for (let i=0;i<this.formShow.form.formFieldRelation.length;i++)
-      {
-        if(this.formShow.form.formFieldRelation[i].formField.type==='CASCADER')
-        {
-          let cascader = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade?this.formShow.form.formFieldRelation[i].formField.extInfo.cascade:this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options?this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options:[]
-          cascader.forEach(item=>{
-            if(item.children!==undefined)
-            {
-              if(item.children.length===0)
-                delete item.children
-              else {
-                item.children.forEach(items=>{
-                  if(items.children)
-                  {
-                    if(items.children.length===0)
-                      delete items.children
-                  }
-                })
-              }
-            }
-          })
-        }
-        if (this.fileListList[this.formShow.form.formFieldRelation[i].fieldId]!==undefined){
-          let value=[]
-
-          this.fileListList[this.formShow.form.formFieldRelation[i].fieldId].forEach(item=>{
-            let file={}
-            file.name=item.name
-            file.url=item.url
-            value.push(file)
-          })
-          this.formShow.form.formFieldRelation[i].value=value
-        }
-
-        if(this.formShow.form.formFieldRelation[i].display===true && this.formShow.form.formFieldRelation[i].required === true&&this.formShow.form.formFieldRelation[i].fieldId!=='workorder_name'&& this.formShow.form.formFieldRelation[i].formField.type !== 'EXPLANATION')
-        {
-
-            if(!this.formShow.form.formFieldRelation[i].value || (this.formShow.form.formFieldRelation[i].value&&this.formShow.form.formFieldRelation[i].value.length===0))
-            {
-              this.$message.error('请完善'+ this.formShow.form.formFieldRelation[i].formField.name)
-              return
-            }
-        }
-      }
-        this.$emit('submitClick',this.formShow)
-        this.disableds = true
-        this.submitValue = '已提交'
-    },
-    //日期的点击事件
-    dateClick(id) {
-      if(this.disableds === false)
-      {
-        for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-          if (this.formShow.form.formFieldRelation[i].fieldId === id) {
-            this.dateId = id
-            this.showCalendar = true
-            break
-          }
-        }
-      }
-
-    },
-    //时间的点击事件
-    timeClick(id,item) {
-      if(this.disableds === false){
-        for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-          if (this.formShow.form.formFieldRelation[i].fieldId === id) {
-            this.timeId = id
-            if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
-              this.showTimePicker = true
-            }
-            else {
-              this.showTimePickerd= true
-            }
-
-            break
-          }
-
-        }
-      }
-
-    },
-    //下拉的点击事件
-    selectClick(id) {
-      if(this.disableds === false){
-        let selectOption
-        this.selectValue=[]
-        for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-          if(this.formShow.form.formFieldRelation[i].formField.type==='SELECT' || this.formShow.form.formFieldRelation[i].formField.type==='OPTION')
-          {
-            if (this.formShow.form.formFieldRelation[i].fieldId === id) {
-              selectOption = this.formShow.form.formFieldRelation[i].formField.extInfo.option?this.formShow.form.formFieldRelation[i].formField.extInfo.option:this.formShow.form.formFieldRelation[i].formField.extInfo.options?this.formShow.form.formFieldRelation[i].formField.extInfo.options:[]
-              for (let j = 0; j < selectOption.length; j++) {
-                this.selectValue[j] = selectOption[j].label
-              }
-
-            }
-          }
-        }
-        this.selectId = id
-        this.showPicker = true
-      }
-
-    },
-    SelectClear(fieldId) {
-      if(this.disableds === false){
-        let i = this.formShow.form.formFieldRelation.findIndex(item => { console.log(item.fieldId); return item.fieldId == fieldId })
-        this.selectValues[this.formShow.form.formFieldRelation[i].fieldId] = ''
-        this.$forceUpdate()
-      }
-    },
-    //级联的点击的事件
-    pickerClick(id) {
-      if(this.disableds === false)
-      {
-        if(this.pickerId!==id)
-        {
-          for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-            if (this.formShow.form.formFieldRelation[i].fieldId === id) {
-              this.keyValue=''
-              if(this.formShow.form.formFieldRelation[i].value.length!==undefined)
-              {
-                for (let m=0;m<this.formShow.form.formFieldRelation[i].value.length;m++)
-                {
-                  this.keyValue+=this.formShow.form.formFieldRelation[i].value[m]
-                }
-              }
-
-              this.data = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade?this.formShow.form.formFieldRelation[i].formField.extInfo.cascade:this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown?this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options:[]
-              this.column[0].values = Object.values(this.data).map(function (e) {
-                return {text: e.value, code: e.value}
-              })
-              if (this.data[0].children !== undefined) {
-                this.column[1].values = Object.values(this.data[0].children).map(function (e) {
-                  return {text: e.value, code: e.value}
-                })
-                if (this.data[0].children[0].children !== undefined) {
-                  this.column[2].values = Object.values(this.data[0].children[0].children).map(function (e) {
-                    return {text: e.value, code: e.value}
-                  })
-                }
-                else {
-                  this.$set(this.data[0].children[0], 'children', [])
-                  this.column[2].values=Object.values(this.data[0].children[0].children).map(function (res) {
-                    return {text: res.value, code: res.value};
-                  })
-                }
-              }
-            }
-          }
-        }
-
-        this.pickerId = id
-        this.showArea = true
-      }
-
-
-    },
-
-    onChange(picker, values,index) {
-      // 这里我有可能渲染的有问题，导致回调每次都修改了当前列，其他值没有修改，当前列？？（当前列什么鬼呀，什么垃圾啊？？？） 解释一下 ↓↓
-      // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
-      // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
-      // 回调时修改第2列数据
-      if (index == 0){
-        picker.setColumnValues(2, []); // 防止突然选中第一个，第二个是更新的，但第三个联级不更新，我暂时强制清空
-      }
-      let ColumnIndexss=picker.getIndexes()
-      let testValue=''
-      this.$nextTick(()=>{
-        if(index == 0)
-        {
-          if(this.data[ColumnIndexss[0]].children.length > 0)
-          {
-            if(this.data[ColumnIndexss[0]].children[0]!==undefined)
-            {
-              testValue=this.data[ColumnIndexss[0]].children[0].value
-              picker.setColumnValues(2, this.county(this.data, testValue));
-            }
-          }
-          else
-            picker.setColumnValues(2, []);
-        }
-        if(index == 1)
-        {
-          if(this.data[ColumnIndexss[0]].children.length > 0)
-          {
-            if(this.data[ColumnIndexss[0]].children[ColumnIndexss[1]]!==undefined)
-            {
-              testValue=this.data[ColumnIndexss[0]].children[ColumnIndexss[1]].value
-              picker.setColumnValues(2, this.county(this.data, testValue));
-            }
-          }
-          else
-            picker.setColumnValues(2, []);
-        }
-      })
-
-      picker.setColumnValues(1, this.cityDate(this.data, values[0].text));
-      // 回调时修改第3列数据
-
-
-    },
-    // 修改级联第二级 这里不再多说什么了根据自己的数据格式来
-    cityDate(data, province) {
-      var that = this;
-      data.forEach(function (res) {
-        if (res.value == province) {
-          that.cityDates = res;
-        }
-      });
-      if (that.cityDates.children !== undefined&&that.cityDates.children.length > 0) {
-        return that.cityDates.children.map(function (res) {
-          return {text: res.value, code: res.value};
-        })
-      } else {
-        this.$set(that.cityDates, 'children', [])
-        return that.cityDates.children.map(function (res) {
-          return {text: res.value, code: res.value};
-        })
-      }
-      // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
-    },
-    // 修改级联第三级 这里不再多说什么了根据自己的数据格式来
-    county(data, county) {
-      var that = this;
-      var countyDate = '';
-      // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
-      // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
-      that.cityDates.children.forEach(function (res) {
-        if (res.value == county) {
-          countyDate = res;
-        }
-      });
-      // 这里如果没有找到对应的县
-      if (countyDate == '') {
-        if(that.cityDates.children.length > 0)
-        {
-          countyDate = that.cityDates.children[0];
-        }
-
-      }
-      // return 县
-      if (countyDate.children === undefined) {
-        this.$set(countyDate, 'children', [])
-        return countyDate.children.map(function (res) {
-          return {text: res.value, code: res.value};
-        })
-      } else {
-        return countyDate.children.map(function (res) {
-          return {text: res.value, code: res.value};
-        })
-      }
-
-      // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
-    },
-    //点击级联弹出框的确认按钮
-    onConfirms(val, id) {
-      let test = ''
-      for (let i = 0; i < val.length; i++) {
-        if (val[i] !== undefined) {
-          test += val[i].text + '/'
-        }
-      }
-      test = test.substr(0, test.length - 1)
-      for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
-        if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
-          this.cascadeValue[id] = test
-          for (let j = 0; j < val.length; j++) {
-            if (val[j] !== undefined) {
-              this.formShow.form.formFieldRelation[i].value[j] = val[j].text
-            }
-          }
-          break
-        }
-      }
-      this.showArea = false;
-      sessionStorage.setItem('cascader',test)
-    },
-    onCancel() {
-      this.showArea = false;
-    },
-    aliyunOssRequest(data){
-
-      this.loading = this.$loading({
-        lock: true,
-        text: 'Loading',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.8)'
-      });
-      let file = data.file;
-      console.debug("upload file:", file);
-      let imgInfo = {
-        status:'',
-        url:'',
-        name:''
-      }
-      /* let imageData = {
-         id:cid,
-         cid:cid,
-         type: "IMAGE",
-         content: {
-           urls: [],
-           progress: 0,
-         },
-       };*/
-      let res = multipartUpload(
-              this.ossConfig,
-              file,
-              null,
-              imgInfo
-      );
-      res.then((res) => {
-        console.debug("upload result:", res);
-        // let filePath = res.name;
-        /* imageData.content.progress = 1;
-         imageData.content.urls.push(
-                 ossFileUrl(this.ossConfig, res.name)
-         );
-         console.log('imageData',imageData)*/
-        imgInfo.url = ossFileUrl(this.ossConfig, res.name)
-        imgInfo.status='success'
-        if (data.file){
-          imgInfo.name = data.file.name
-          imgInfo.uid = data.file.uid
-        }
-        if (!this.fileListList[this.filedId])
-        {
-          this.fileListList[this.filedId] = []
-        }
-        this.fileListList[this.filedId].push(imgInfo)
-        this.loading.close()
-      }).catch((err) => {
-        console.debug("upload err", err);
-      });
-    },
-    successUpload(response,file,fileList){
-      if (!this.fileListList[this.filedId]){
-        this.fileListList[this.filedId] = []
-      }
-      for (let i=0;i<fileList.length;i++){
-        if (!this.fileListList[this.filedId][i]){
-          this.fileListList[this.filedId][i]={}
-        }
-        this.fileListList[this.filedId][i].url=fileList[i].url
-        this.fileListList[this.filedId][i].name=fileList[i].name
-        this.fileListList[this.filedId][i].status=fileList[i].status
-      }
-    },
-    uploadProgress(){
-      this.loading = this.$loading({
-        lock: true,
-        text: 'Loading',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-    },
-    handleRemove(file) {
-      if (this.fileListList[this.filedId]){
-        for (let i=0;i<this.fileListList[this.filedId].length;i++)
-        {
-          if (this.fileListList[this.filedId][i].uid){
-            if (this.fileListList[this.filedId][i].uid===file.uid){
-              this.fileListList[this.filedId].splice(i,1)
-              return
-            }
-          }
-          else if (this.fileListList[this.filedId][i].url===file.url){
-            this.fileListList[this.filedId].splice(i,1)
-            return
-          }
-        }
-
-      }
-      /*let value=[]
-      for (let i=0;i<fileList.length;i++){
-        value[i]={}
-        value[i].name=fileList[i].name
-        if(fileList[i].response){
-          value[i].url=fileList[i].response.data
-        }
-        else {
-          value[i].url=fileList[i].url
-        }
-      }
-      for (let i=0;i<this.formShow.form.formFieldRelation.length;i++){
-        if (this.formShow.form.formFieldRelation[i].fieldId===this.filedId){
-          this.fileListList[this.filedId]=value
-        }
-      }*/
-      /*this.fileListList = [...this.fileListList]*/
-    },
-    handleEditChange(file,fileList){
-      this.hideUploadEdit=fileList.length >= this.limitNum
-    },
-
-    onUploadProgress: function (progress, point, file, videoData) {
-      console.debug("upload video progress", progress, point);
-      if (progress === 1) {
-        // this.loadingIns.close();
-        videoData.content.url = ossFileUrl(this.ossConfig, point.name);
-        // this.chooseVideo({data:url},file);
-
-      } else {
-        videoData.content.progress = progress;
-
-      }
-    },
-    checkUpload(id,limitNum){
-      this.filedId=id
-      this.limitNum = limitNum
-
-    },
-    beforeAvatarUpload(file){
-      const isLte2M = file.size / 1024 / 1024 <= 8;
-      const isSupportedFormat =file.type.indexOf('image')!==-1
-      if (!isSupportedFormat){
-        this.$message.error("只能上传图片格式");
-        return false
-      }
-      if (!isLte2M) {
-        this.$message.error("上传图片大小不能超过 8MB!");
-        return false
-      }
-      return true
-    },
-    exceedUpload(){
-      this.$message.warning('上传文件数量达到上限')
-    },
-
-    handlePictureCardPreview(file) {
-      this.videoFlag = true;
-      this.videoUploadPercent = file.percentage.toFixed(0);
-    },
-  },
-  //时间日期范围的点击事件
-  /* dateTimeClick(id){
-      for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
-      {
-        if(this.formList.form.formFieldRelation[i].formField.id===id)
-        {
-          this.dateTimeId=id
-          this.showDateTimePicker = true
-          break
-        }
-      }
-    },
-    dateTimeClick1(id){
-      if(this.dateTimeValue.length === 0)
-      {
-        this.$message.error('请先选择开始日期时间')
-      }
-      else
-      {
-        for (let i=0;i<this.formList.form.formFieldRelation.length;i++)
-        {
-          if(this.formList.form.formFieldRelation[i].formField.id===id)
-          {
-            this.dateTimeId=id
-            this.showDateTimePicker1 = true
-            break
-          }
-        }
-      }
-
-    },*/
-
-
-
-}
-</script>
-
-<style lang="less" scoped>
-.notClick {
-  pointer-events: none;
-}
-.formClass{
-  /* border: 1px solid #ebebeb;*/
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  border-radius: 15px;
-  .explanation{
-    display: flex;
-    padding: 4px;
-    .explanation-p{
-      color: #366aff;
-      font-size: 14px;
-      margin: 10px 4px;
-      .el-icon-info{
-        margin-right: 8px;
-      }
-    }
-  }
-  .explain-url{
-    a{
-      color:#366aff ;
-    }
-  }
-  .titleName{
-    font-size: 1em;
-    text-align: center;
-    padding-bottom: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-   /* border-bottom: 1px solid #EEEEEE;*/
-  }
-  .title-link{
-    height: 1px;
-    background-color: #EEEEEE;
-  }
-  .bottom-link{
-    margin-top: 14px;
-    height: 1px;
-    background-color: #EEEEEE;
-  }
-  .form-submit-btn{
-    padding: 14px 16px 0 16px;
-    text-align: center;
-  }
-  /deep/.ck.ck-editor{
-   padding: 0 8px;
-  }
-  /deep/.ck.ck-toolbar{
-    border-color:#E0E6F7;
-    border-top-left-radius: 9px!important;
-    border-top-right-radius: 9px!important;
-  }
-  /deep/.ck.ck-editor__editable_inline{
-    border-color:#E0E6F7;
-    min-height: 150px!important;
-    border-bottom-left-radius: 9px!important;
-    border-bottom-right-radius: 9px!important;
-  }
-}
-.pcFormClass{
-  width: 400px;
-  margin: 0 auto;
-  .field-item{
-    padding: 8px 0;
-    .field-item-name{
-      padding-bottom: 8px;
-      color: #A9B3C6;
-     /* color: #000000;*/
-    }
-  }
-  /deep/.el-input__inner{
-    border-color: #E0E6F7!important;
-    background-color: transparent!important;
-    border-radius: 9px!important;
-  }
-  /deep/.el-textarea__inner{
-    border-color: #E0E6F7!important;
-    background-color: transparent!important;
-    border-radius: 9px!important;
-    padding: 9px 15px!important;
-  }
-  /deep/.el-upload--picture-card{
-    background-color: #FFFFFF;
-    border: 1px solid #E0E6F7;
-    border-radius: 10px;
-    width: 74px;
-    height: 74px;
-    vertical-align: top;
-    cursor: pointer;
-    text-align: center;
-    font-size:28px;
-    color:#366AFF;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    i{
-      color: #366AFF;
-    }
-  }
-  /deep/.el-select-dropdown__item.selected{
-    color: #366aff;
-  }
-  /deep/.el-upload-list--picture-card{
-    .el-upload-list__item{
-      width: 74px;
-      height: 74px;
-      border-radius: 10px;
-    }
-  }
-  /deep/.el-upload-list__item-name{
-    max-width: 180px;
-  }
-  .hide .el-upload--picture-card {
-    display: none!important;
-  }
-}
-/deep/.van-radio__icon--checked .van-icon{
-  background-color: #366aff!important;
-  border-color: #366aff!important;
-}
-/deep/.van-checkbox__icon--checked .van-icon{
-  background-color: #366aff!important;
-  border-color: #366aff!important;
-}
-/deep/.vant-upload--picture-card{
-  background-color: #ffffff;
-  border: 1px solid #E0E6F7;
-  border-radius: 10px;
-  width: 74px;
-  height: 74px;
-  vertical-align: top;
-  cursor: pointer;
-  text-align: center;
-  font-size:28px;
-  color:#8c939d;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  i{
-    color: #366aff;
-  }
-}
-/deep/.van-popup{
-  border-radius: 5px;
-}
-.remPhoneClassForm{
-  .mobileFormClass{
-    width: calc(100vw - 110px);
-    .form-field-item{
-      .form-field-item-value{
-        /deep/.van-cell{
-          flex-direction: column;
-          padding: 8px 16px;
-        }
-        /deep/.van-cell__value{
-          border: 1px solid #E0E6F7;
-          border-radius: 9px;
-          min-height: 40px;
-          padding: 0 10px;
-        }
-        /deep/.van-cell__right-icon{
-          color: #999999!important;
-        }
-        .form-field-item-file{
-          padding: 8px;
-          .fileName{
-            padding-bottom: 8px;
-            color: #A9B3C6;
-           /* color: #000000;*/
-          }
-        }
-        .workorder_description{
-         /* padding: 8px 16px;*/
-          padding: 8px 0;
-          /*font-size: 14px;*/
-          .field-name{
-            width: 100%;
-            text-align: left;
-            color: #A9B3C6;
-           /* color: #000000;*/
-            line-height: 1;
-            padding-bottom: 8px;
-          }
-          /*.required-name{
-            margin-left: -6px;
-          }*/
-
-         /* /deep/.ck-content .image img{
-            max-width: 200px!important;
-          }*/
-        }
-      }
-      .form-field-item-other{
-        /deep/.van-cell{
-          flex-direction: column;
-        }
-        /deep/.van-cell__value{
-          min-height: 40px;
-        }
-      }
-      .explan-ation{
-        .explan-ation-div{
-          display: flex;
-         /* padding: 4px 16px;*/
-          padding: 4px;
-        }
-        .explan-ation-p{
-          color: #366aff;font-size: 14px;margin: 16px 4px;
-        }
-      }
-    }
-    .upload-phone-demo{
-      /deep/.el-upload--picture-card{
-        background-color: #fbfdff;
-        border: 1px dashed #c0ccda;
-        border-radius: 6px;
-        width: 74px;
-        height: 74px;
-        vertical-align: top;
-        cursor: pointer;
-        text-align: center;
-        font-size:28px;
-        color:#8c939d;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      /deep/.el-upload-list--picture-card .el-upload-list__item{
-        height: 76px;
-        width: 76px;
-      }
-    }
-    /deep/.van-image__img{
-      border-radius: 10px;
-    }
-  }
-  .submitClass{
-    min-width: 100px;
-    background-color: #366aff;
-    color: white!important;
-    height: 32px;
-    i{
-      padding-right: 8px;
-      font-weight: 600;
-    }
-  }
-  /deep/.van-radio-group--horizontal{
-   .van-radio{
-      min-width: 100px;
-      max-width: 260px;
-      flex: none;
-    }
-    .van-radio--horizontal{
-      padding: 0.3rem 0;
-      margin-right: 6px;
-    }
-  }
-  /deep/.van-checkbox-group--horizontal{
-    .van-checkbox{
-      min-width: 100px;
-      max-width: 260px;
-      flex: none;
-    }
-    .van-checkbox--horizontal{
-      padding: 0.3rem 0;
-      margin-right: 6px;
-    }
-  }
-  /deep/.van-button--info{
-    border:1px solid #366aff;
-  }
-  /deep/.van-field__label{
-    width: 100%;
-    text-align: left;
-    color: #A9B3C6!important;
- /*   color: #000000!important;*/
-    display: flex;
-    align-items: center;
-    line-height: 1;
-    padding-bottom: 8px;
-    font-size: 1em;
-  }
-
-  /deep/.van-field__control{
-    min-height: 40px;
-  }
-  /deep/textarea{
-    padding: 7px 0;
-  }
-  /deep/.van-dropdown-menu__bar{
-    box-shadow: none!important;
-  }
-  /deep/.van-overlay{
-    background-color: rgba(0,0,0,.4);
-  }
-}
-
-.remCompanyClassForm{
-  width: 100%;
-  font-size: 1em;
-  .submitClass{
-    min-width: 100px;
-    color: white!important;
-    background-color:#366aff;
-    border-color: #366aff;
-    i{
-      padding-right: 8px;
-      font-weight: 600;
-    }
-  }
-  /deep/.el-checkbox-group{
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    .el-checkbox{
-      padding: 8px 0;
-      min-width:150px;
-      max-width: 280px;
-      flex: none;
-      display: flex;
-      overflow: hidden;
-      margin-right: 0;
-      display: flex;
-      align-items:center;
-    }
-    .el-checkbox__label{
-      font-size: 1em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  /deep/.el-radio-group{
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    .el-radio{
-      padding: 8px 0;
-      min-width:150px;
-      max-width: 280px;
-      flex: none;
-      display: flex;
-      overflow: hidden;
-      margin-right: 0;
-    }
-    .el-radio__label{
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 1em;
-    }
-  }
-
-  /deep/.el-radio__input.is-checked+.el-radio__label{
-    color: #366aff!important;
-  }
-  /deep/.el-radio__input.is-checked .el-radio__inner{
-    color: #366aff!important;
-    border-color:  #366aff!important;
-    background: #366aff!important;
-  }
-  /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
-    color: #366aff!important;
-  }
-  /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-    background-color: #366aff!important;
-    border-color: #366aff!important;
-  }
-  /deep/.ck .ck-icon {
-    width: 14px !important;
-    height: 14px !important;
-  }
-}
-
+<template>
+  <div class="media-body">
+    <div class="formClass" :class="isPhone?'remPhoneClassForm':'remCompanyClassForm'" v-if="formShow.form">
+      <div class="titleName" >
+        {{formShow.form.name}}
+      </div>
+      <div class="title-link"></div>
+      <div class="pcFormClass" v-if="isCompany">
+        <div v-for="(item) in formFieldRelation"
+            :key="item.fieldId"
+            :class="{notClick:disableds === true}"
+        >
+        <div class="field-item">
+          <div v-if="item.fieldId !== 'workorder_name' && item.formField.type !== 'EXPLANATION' && item.formField.type !== 'EXPLAIN' " class="field-item-name">
+            <span v-if="item.fieldId!=='workorder_description'&&item.fieldId!=='workorder_clientId'">{{item.formField.name}}</span>
+            <span v-if="item.fieldId==='workorder_description'">问题描述</span>
+            <span v-if="item.fieldId==='workorder_clientId'">报单人</span>
+            <span style="color: red;padding-left: 5px" v-if="item.required || isRequiredFn(item.formField)">*</span>
+          </div>
+          <!-- item.value -->
+          <el-input v-model="item.value"
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
+                    :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
+                    v-else-if="item.formField.type==='INPUT'&&item.fieldId!=='workorder_name'"
+          ></el-input>
+          <template v-else-if="item.formField.type==='EXPLANATION'">
+            <div class="explanation">
+              <p class="explanation-p">
+                <span class="el-icon-info"></span>
+                {{item.formField.extInfo.descriptionText}}
+              </p>
+            </div>
+          </template>
+          <template v-else-if="item.formField.type==='EXPLAIN'">
+            <div  class="explanation">
+              <p class="explanation-p">
+                <span class="el-icon-info"></span>
+                <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
+                <span v-else>{{item.value}}</span>
+              </p>
+            </div>
+          </template>
+          <el-input type="textarea" :rows="2" v-model="fieldValus[item.fieldId]"
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
+                    :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
+                    v-if="item.formField.type==='TEXTAREA'&& item.fieldId!=='workorder_description'"
+          ></el-input>
+          <ckeditor
+              :editor="ckeditor.editor"
+              v-model="item.value"
+              :config="ckeditor.editorConfig"
+              v-else-if="item.fieldId==='workorder_description'"
+          ></ckeditor>
+          <el-date-picker
+                  v-model=item.value
+                  type="date"
+                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
+                  style="width: 100%"
+                  v-else-if="item.formField.type==='DATE_PICKER'"
+          >
+          </el-date-picker>
+          <el-time-picker
+                  v-model=item.value
+                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
+                  style="width: 100%"
+                  v-else-if="item.formField.type==='TIME_PICKER' && (!item.formField.extInfo.mold || item.formField.extInfo.mold == 'TIME' || getMoldTime(item.formField) == 'TIME')"
+          >
+          </el-time-picker>
+          <el-date-picker
+                  v-model=item.value
+                  type="date"
+                  style="width: 100%"
+                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
+                  v-else-if="item.formField.type==='TIME_PICKER' && (item.formField.extInfo.mold==='DATA' || item.formField.extInfo.mold==='DATE' || getMoldTime(item.formField) == 'DATE')"
+          >
+          </el-date-picker>
+          <el-date-picker
+                  v-model=item.value
+                  :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期时间'"
+                  clearable
+                  style="width: 100%"
+                  type="datetime"
+                  v-else-if="item.formField.type==='TIME_PICKER' && (item.formField.extInfo.mold==='DATA_TIME' || item.formField.extInfo.mold==='DATE_TIME' || getMoldTime(item.formField) == 'DATE_TIME')"
+          >
+          </el-date-picker>
+          <div v-else-if="item.formField.type==='RADIO' &&item.formField.extInfo.options">
+            <el-radio-group v-model=item.value style="text-align:left">
+              <el-radio v-for="(items,index) in item.formField.extInfo.options" :label=items.value  :key="index">{{items.label}}</el-radio>
+            </el-radio-group>
+          </div>
+          <div v-else-if="item.formField.type==='RADIO' &&item.formField.extInfo.option">
+            <el-radio-group v-model=item.value style="text-align:left">
+              <el-radio v-for="(items,index) in item.formField.extInfo.option" :label=items.value  :key="index">{{items.label}}</el-radio>
+            </el-radio-group>
+          </div>
+          <div v-else-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.option">
+            <el-checkbox-group v-model=item.value style="text-align:left">
+              <el-checkbox
+                      v-for="(items,index) in item.formField.extInfo.option"
+                      :label=items.value
+                      :key="index"
+              >{{items.label}}</el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <div v-else-if="item.formField.type==='CHECKBOX' && item.formField.extInfo.options">
+            <el-checkbox-group v-model=item.value style="text-align:left">
+              <el-checkbox
+                      v-for="(items,index) in item.formField.extInfo.options"
+                      :label=items.value
+                      :key="index"
+              >{{items.label}}</el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <div v-else-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" >
+<!--            <el-select
+                    v-model=item.value
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                    style="width: 100%"
+                    filterable
+                    v-if="item.formField.extInfo && item.formField.extInfo.option"
+            >
+              <el-option
+                      v-for="(items,index) in item.formField.extInfo.option"
+                      :key="index"
+                      :label="items.label"
+                      :value="items.value">
+              </el-option>
+            </el-select>
+            <el-select
+                    v-model=item.value
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                    style="width: 100%"
+                    filterable
+                    v-else-if="item.formField.extInfo && item.formField.extInfo.options"
+            >
+              <el-option
+                      v-for="(items,index) in item.formField.extInfo.options"
+                      :key="index"
+                      :label="items.label"
+                      :value="items.value">
+              </el-option>
+            </el-select>-->
+            <el-select
+                v-model=item.value
+                :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                style="width: 100%"
+                filterable
+                v-if="item.formField.extInfo && item.formField.extInfo.option"
+            >
+              <el-option
+                  v-for="(items,index) in item.formField.extInfo.option"
+                  :key="index"
+                  :label="items.label"
+                  :value="items.value">
+              </el-option>
+            </el-select>
+            <div class="cascader-input" v-else @click="openDrawer(item,'select')">
+              <template v-if="item.value && (!Array.isArray(item.value) || (Array.isArray(item.value) && item.value.length))">
+                <template v-if="Array.isArray(item.value)">
+                  <span v-for="(select,selectIndex) in item.value" :key="selectIndex">
+                    {{selectIndex==0?select:','+select}}
+                  </span>
+                </template>
+                <template v-else>{{item.value}}</template>
+              </template>
+              <span v-else>{{item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'}}</span>
+            </div>
+          </div>
+          <template v-else-if="item.formField.type==='CASCADER'">
+            <div class="cascader-input" @click="openDrawer(item,'pc_cascader')">
+              <template v-if="checkDatas[item.fieldId] && (Array.isArray(checkDatas[item.fieldId]) && checkDatas[item.fieldId].length > 0)">
+                <span v-for="(cas,casIndex) in checkDatas[item.fieldId]" :key="casIndex">
+                  {{casIndex==0?cas.label:'/'+cas.label}}
+                </span>
+              </template>
+              <span v-else>{{item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'}}</span>
+            </div>
+<!--            <el-cascader
+                    v-model=item.value
+                    :options=item.formField.extInfo.cascade
+                    style="width: 100%;"
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                    v-if="item.formField.extInfo.cascade"
+            ></el-cascader>
+             <el-cascader
+                    v-model=item.value
+                    :options="item.formField.extInfo.cascadeDown.options"
+                    style="width: 100%;"
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择时间'"
+                    v-else-if="Object.prototype.toString.call(item.formField.extInfo.cascadeDown) === '[object Object]'"
+            ></el-cascader>
+            <el-cascader
+                    v-model=item.value
+                    :options=setOptions(item.formField.extInfo)
+                    style="width: 100%;"
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                    v-else-if="item.formField.extInfo.cascadeDown.length != 0"
+            ></el-cascader>-->
+          </template>
+          <div v-else-if="item.formField.type==='FILE' || item.formField.type === 'IMAGE' || item.formField.type === 'ATTACHMENT' || item.formField.type === 'VIDEO'">
+            <div @click="checkUpload(item.fieldId,item.formField.extInfo)" @mouseover="checkUpload(item.fieldId,item.formField.extInfo)" style="flex: 0.75;display:flex;align-items: center;">
+              <el-upload
+                      class="upload-demo"
+                      ref="upload"
+                      :list-type="item.formField.type === 'IMAGE'?'picture-card':''"
+                      :accept="acceptFieldType(item.formField.type)"
+                      name="file"
+                      action="/open/media/file/upload"
+                      :multiple="item.formField.extInfo&&item.formField.extInfo.limitNum&&item.formField.extInfo.limitNum>1?true:false"
+                      :file-list="fileListList[item.fieldId]"
+                      :limit="item.formField.extInfo.limitNum?Number(item.formField.extInfo.limitNum):(item.formField.extInfo.limit ? Number(item.formField.extInfo.limit) : 1)"
+                      :before-upload="(file=>{return beforeAvatarUpload(file,item.formField.type)})"
+                      :on-exceed="exceedUpload"
+                      :on-remove="handleRemove"
+                      :http-request="aliyunOssRequest"
+                      :on-change="handleEditChange"
+                      :on-success="successUpload"
+              >
+                <i class="el-icon-plus"></i>
+<!--                <el-button size="small" type="primary" v-else class="uploadBtn">点击上传</el-button>-->
+              </el-upload>
+            </div>
+          </div>
+          <div v-else-if="item.formField.type == 'REF_TEMPLATE' || item.formField.type == 'REF'">
+            <el-select
+                    v-model=item.value
+                    :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                    style="width: 100%"
+                    filterable
+                    :multiple="item.formField.extInfo && item.formField.extInfo.selectType == '多选'"
+                    @visible-change="(visible) =>{ return refTemplateVisibleChange(visible,item)  }"
+            >
+              <template v-for="(items,index) in refTemplateList[item.fieldId]">
+                <el-option
+                        v-if="refTemplateList[item.fieldId]"
+                        :key="index"
+                        :label="items.label"
+                        :value="items.value">
+                </el-option>
+              </template>
+              <div
+                @click="lodeMore(item)"
+                style="widht:100%;height:30px;display:flex;align-items: center;justify-content: center;color:#606266">
+                  加载更多
+              </div>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      </div>
+      <div class="mobileFormClass" v-else style="padding: 10px 0;" :class="{notClick:disableds === true}">
+        <div v-for="(item) in formFieldRelation"
+           :key="item.fieldId"
+           class="form-field-item"
+        >
+        <div v-if="item.formField.type==='INPUT'"  class="form-field-item-value">
+          <van-field v-model=item.value
+                     :label=item.formField.name
+                     :required="item.required || isRequiredFn(item.formField)"
+                     :disabled="disableds"
+                     :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
+                     :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
+          />
+        </div>
+        <div v-else-if="item.formField.type==='EXPLANATION'||item.formField.type==='EXPLAIN'" class="explan-ation">
+          <div  class="explanation">
+            <p  class="explanation-p" v-if="item.formField.type==='EXPLANATION'">
+              <span class="el-icon-info"></span>
+              {{item.formField.extInfo.descriptionText}}
+            </p>
+            <p v-else class="explanation-p">
+              <span class="el-icon-info"></span>
+              <span v-if="item.formField.extInfo.url" class="explain-url"><a :href="item.formField.extInfo.url" target="_blank">{{item.value}}</a></span>
+              <span v-else>{{item.value}}</span>
+            </p>
+          </div>
+        </div>
+        <div v-else-if="item.formField.type==='TEXTAREA'" class="form-field-item-value">
+          <van-field v-model=item.value
+                     :label=item.formField.name
+                     :required="item.required || isRequiredFn(item.formField)"
+                     type="textarea"
+                     :disabled="disableds"
+                     :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请输入'"
+                     :maxlength="item.formField.extInfo&&item.formField.extInfo.maxNum?item.formField.extInfo.maxNum*1:1000"
+                     v-if="item.fieldId!=='workorder_description'"
+          />
+          <div v-if="item.fieldId==='workorder_description'" class="workorder_description">
+            <div class="field-name" :class="item.required || isRequiredFn(item.formField)?'required-name':''">
+              <span v-if="item.required || isRequiredFn(item.formField)" style="color: red">*</span>
+              {{item.formField.name}}
+            </div>
+            <ckeditor
+                :editor="ckeditor.editor"
+                v-model="item.value"
+                @onReady="onReady"
+                :config="ckeditor.editorConfig"
+            ></ckeditor>
+          </div>
+        </div>
+        <div v-else-if="item.formField.type==='DATE_PICKER'" class="form-field-item-value">
+          <van-field
+              readonly
+              clickable
+              name="calendar"
+              :value=dateValue[item.fieldId]
+              :label=item.formField.name
+              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择日期'"
+              :required="item.required || isRequiredFn(item.formField)"
+              @click="dateClick(item.fieldId)"
+              :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
+          />
+          <van-calendar
+              v-model="showCalendar"
+              @confirm="onConfirmCalendar($event,item)"
+          />
+        </div>
+        <div v-else-if="item.formField.type==='TIME_PICKER'&&(!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME' || item.formField.extInfo.mold==='DATE_TIME' || getMoldTime(item.formField) == 'DATE_TIME')" class="form-field-item-value">
+          <van-field
+              readonly
+              clickable
+              name="datetimePicker"
+              :required="item.required || isRequiredFn(item.formField)"
+              :value=timeValue[item.fieldId]
+              :label=item.formField.name
+              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+              @click="timeClick(item.fieldId,item,'DATE_TIME')"
+              :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
+
+          />
+          <van-popup v-model="dateTimePicker" position="bottom">
+            <van-datetime-picker
+                v-model="currentDate"
+                type="datetime"
+                @confirm="onConfirm($event,item.fieldId,item,'DATE_TIME')"
+                @cancel="dateTimePicker = false"
+                :min-date="minDate"
+                :formatter="formatter"
+                :max-date="maxDate"
+            />
+          </van-popup>
+        </div>
+          <div v-else-if="item.formField.type==='TIME_PICKER'&&(!item.formField.extInfo.mold || item.formField.extInfo.mold==='TIME' || getMoldTime(item.formField) == 'TIME')" class="form-field-item-value">
+            <van-field
+                readonly
+                clickable
+                name="datetimePicker"
+                :required="item.required || isRequiredFn(item.formField)"
+                :value=timeValue[item.fieldId]
+                :label=item.formField.name
+                :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                @click="timeClick(item.fieldId,item,'TIME')"
+                :disabled="disableds"
+                right-icon="van-icon van-icon-arrow van-cell__right-icon"
+
+            />
+            <van-popup v-model="timePicker" position="bottom">
+              <van-datetime-picker
+                  v-model="currentTime"
+                  type="time"
+                  title="选择时间"
+                  :min-hour="0"
+                  :max-hour="23"
+                  @confirm="onConfirm($event,item.fieldId,item,'TIME')"
+                  @cancel="timePicker = false"
+              />
+            </van-popup>
+          </div>
+        <div v-else-if="item.formField.type==='TIME_PICKER'&&(item.formField.extInfo.mold==='DATA' || item.formField.extInfo.mold==='DATE' || getMoldTime(item.formField) == 'DATE')" class="form-field-item-value">
+          <van-field
+              readonly
+              clickable
+              name="datetimePicker"
+              :required="item.required || isRequiredFn(item.formField)"
+              :value=timeValue[item.fieldId]
+              :label=item.formField.name
+              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+              @click="timeClick(item.fieldId,item,'DATE')"
+              :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
+
+          />
+          <van-calendar v-model="datePicker" :show-confirm="false" @confirm="onConfirm($event,item.fieldId,item,'DATE')"  @cancel="datePicker = false"/>
+        </div>
+        <div v-else-if="item.formField.type==='RADIO'" class="form-field-item-other">
+          <van-field name="radio" :label="item.formField.name" :required="item.required || isRequiredFn(item.formField)" :disabled="disableds"  v-if="item.formField.extInfo.option">
+            <template #input style="display: flex;align-items: center">
+              <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
+                <van-radio v-for="(items,index) in item.formField.extInfo.option"  :name=items.value :key="index">{{items.label}}</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-field name="radio" :label="item.formField.name" :required="item.required || isRequiredFn(item.formField)" :disabled="disableds"  v-if="item.formField.extInfo.options">
+            <template #input style="display: flex;align-items: center" >
+              <van-radio-group v-model=item.value direction="horizontal" :disabled="disableds">
+                <van-radio v-for="(items,index) in item.formField.extInfo.options"  :name=items.value :key="index">{{items.label}}</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+        </div>
+        <div v-else-if="item.formField.type==='CHECKBOX'" class="form-field-item-other">
+          <van-field name="checkbox" :label=item.formField.name :required="item.required || isRequiredFn(item.formField)" :disabled="disableds" v-if="item.formField.extInfo.option">
+            <template #input style="display: flex;align-items: center" >
+              <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
+                <van-checkbox
+                    v-for="(items,index) in item.formField.extInfo.option"
+                    shape="square"
+                    :key="index"
+                    :name=items.value>
+                  {{items.label}}
+                </van-checkbox>
+              </van-checkbox-group>
+            </template>
+          </van-field>
+          <van-field name="checkbox" :label=item.formField.name :required="item.required || isRequiredFn(item.formField)" :disabled="disableds" v-if="item.formField.extInfo.options">
+            <template #input style="display: flex;align-items: center" >
+              <van-checkbox-group v-model=item.value ref="checkboxGroup" direction="horizontal" :disabled="disableds">
+                <van-checkbox
+                    v-for="(items,index) in item.formField.extInfo.options"
+                    shape="square"
+                    :key="index"
+                    :name=items.value>
+                  {{items.label}}
+                </van-checkbox>
+              </van-checkbox-group>
+            </template>
+          </van-field>
+        </div>
+        <div v-else-if="item.formField.type==='SELECT' || item.formField.type==='OPTION'" class="form-field-item-value">
+          <template v-if="item.fieldId==='workorder_clientId' || item.fieldId === 'workorder_statusId' || item.fieldId === 'workorder_priority'">
+            <van-field
+                readonly
+                clickable
+                name="picker"
+                :value=selectValues[item.fieldId]
+                :label="item.fieldId==='workorder_clientId'?'报单人':item.formField.name"
+                :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                @click="selectClick(item.fieldId,'client',item)"
+                :required="item.required || isRequiredFn(item.formField)"
+                :disabled="disableds"
+                @click-right-icon.stop="SelectClear(item.fieldId)"
+                :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+              <van-picker
+                  show-toolbar
+                  :columns=selectValue
+                  @confirm="onConfirmSelect($event,item)"
+                  @cancel="showPicker = false"
+                  :key="selectKey"
+
+              />
+            </van-popup>
+          </template>
+          <template v-else>
+            <van-field
+                readonly
+                clickable
+                name="picker"
+                :value="Array.isArray(item.value)?item.value.join(','):item.value"
+                :label=item.formField.name
+                :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+                @click="selectClick(item.fieldId,'select',item)"
+                :required="item.required || isRequiredFn(item.formField)"
+                :disabled="disableds"
+                @click-right-icon.stop="SelectClear(item.fieldId)"
+                :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
+            />
+            <van-popup v-model="selectPicker" position="bottom" :style="{ height: '300px' }">
+              <select-popup
+                  :options="item.formField.extInfo.option?item.formField.extInfo.option:item.formField.extInfo.options"
+                  :defaultValue="defaultValue"
+                  @onConfim="confirmSelect"
+                  @onclose= "selectPicker = false"
+                  :multiple="item.formField.extInfo && item.formField.extInfo.selectType ==='多选'?true:false"
+                  ref="selectPopup"
+                  :props="{
+                    value:'value',
+                    label:'label'
+                  }"
+              ></select-popup>
+            </van-popup>
+          </template>
+        </div>
+        <div v-if="item.formField.type === 'REF_TEMPLATE' || item.formField.type === 'REF'" class="form-field-item-value">
+            <van-field
+              readonly
+              clickable
+              :value="Array.isArray(selectValues[item.fieldId])?selectValues[item.fieldId].join(','):selectValues[item.fieldId]"
+              :label="item.formField.name"
+              name="picker"
+              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+              @click="selectClick(item.fieldId,'ref',item)"
+              @click-right-icon.stop="SelectClear(item.fieldId)"
+              :required="item.required || isRequiredFn(item.formField)"
+              :disabled="disableds"
+              :right-icon="selectValues[item.fieldId]? 'close' : 'van-icon van-icon-arrow van-cell__right-icon'"
+            />
+            <van-popup v-model="refShowPicker" position="bottom" :style="{ height: '300px' }">
+              <select-popup
+                  :options="refTemplateList[item.fieldId]"
+                  :defaultValue="defaultValue"
+                  @onConfim="confirmRefSelect"
+                  @onclose= "refShowPicker = false"
+                  :multiple="detailField.formField.extInfo && detailField.formField.extInfo.selectType ==='多选'?true:false"
+                  ref="selectPopup"
+                  :props="{
+                    value:'id',
+                    label:'name'
+                  }"
+              >
+              </select-popup>
+            </van-popup>
+          </div>
+        <div v-else-if="item.formField.type==='CASCADER'" class="form-field-item-value">
+          <van-field
+              readonly
+              clickable
+              name="area"
+              :value="checkDatas[item.fieldId] && Array.isArray(checkDatas[item.fieldId])?checkDatas[item.fieldId].map(e=>e.label).join(','):''"
+              :label=item.formField.name
+              :placeholder="item.formField.extInfo&&item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:'请选择'"
+              @click="openDrawer(item,'cascader')"
+              :required="item.required || isRequiredFn(item.formField)"
+              :disabled="disableds"
+              right-icon="van-icon van-icon-arrow van-cell__right-icon"
+          />
+
+          <van-popup v-model="showArea" position="bottom" :style="{ height: '400px' }">
+            <tree ref="drawerTree"
+                  :dataOptions="item.formField"
+                  @saveData="saveData"
+                  @cancelBtn="showArea = false"
+            ></tree>
+          </van-popup>
+        </div>
+        <div v-else-if="item.formField.type === 'FILE' || item.formField.type === 'IMAGE' || item.formField.type === 'ATTACHMENT' || item.formField.type === 'VIDEO'" class="form-field-item-value">
+          <div @click="checkUpload(item.fieldId,item.formField.extInfo)" class="form-field-item-file">
+            <div class="fileName"><span style="color: red" v-if="item.required || isRequiredFn(item.formField)">*</span>{{item.formField.name}}</div>
+            <van-uploader
+                v-model="fileListList[item.fieldId]"
+                :before-read="(file=>{return beforeRead(file,item.formField.type)})"
+                :max-count='item.formField.extInfo&&item.formField.extInfo.limitNum ? item.formField.extInfo.limitNum : (item.formField.extInfo.limit ? item.formField.extInfo.limit : 1)'
+                :after-read="afterRead"
+                :accept="acceptFieldType(item.formField.type)"
+                :multiple="item.formField.extInfo&&item.formField.extInfo.limitNum&&item.formField.extInfo.limitNum>1?true:false"
+            >
+              <div class="vant-upload--picture-card">
+                <i  class="el-icon-plus"></i>
+              </div>
+            </van-uploader>
+          </div>
+        </div>
+      </div>
+        <van-popup v-model="fileUpload" :close-on-click-overlay="false">
+          <div style="background-color: black;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center" >
+           <van-loading type="spinner"/>
+          </div>
+        </van-popup>
+    </div>
+      <div class="bottom-link"></div>
+      <div class="form-submit-btn" v-if="isCompany">
+        <el-button style="border-color: #366aff;color: white;background-color: #366aff"  round class="submitClass" size="small" @click="submitClick" :disabled="disableds">
+          <i class="el-icon-check" v-if="!disableds"></i>
+          {{submitValue}}
+        </el-button>
+      </div>
+      <div class="form-submit-btn" v-else>
+        <van-button  round  type="info" class="submitClass" @click="submitClick"  :disabled="disableds">
+          <i class="el-icon-check" v-if="!disableds"></i>
+          {{submitValue}}
+        </van-button>
+      </div>
+    </div>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+    <el-drawer
+        :withHeader="false"
+        :visible.sync="drawer"
+        size="60%"
+        direction="btt">
+      <div class="drawer-container">
+       <tree ref="drawerTree"
+             :dataOptions="detailField.formField"
+             @saveData="saveData"
+             @cancelBtn="drawer = false"
+       ></tree>
+      </div>
+    </el-drawer>
+    <el-drawer
+        :withHeader="false"
+        :visible.sync="selectPopUp"
+        size="40%"
+        direction="btt"
+    >
+      <select-popup
+          :options="options"
+          :defaultValue="defaultValue"
+          @onConfim="confirmSelect"
+          :multiple="detailField.formField.extInfo && detailField.formField.extInfo.selectType ==='多选'?true:false"
+          ref="selectPopup"
+          :props="{
+            value:'label',
+            label:'value'
+          }"
+      ></select-popup>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { forMatTime } from "./utils/format_date";
+
+let that
+import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
+import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
+import MyimageUpload from './utils/plugin-image'
+import CKEDITOR from 'ckeditor'
+
+import myPopup from "./myPopup.vue";
+import Tree from '../components/tree'
+import selectPopup from '../components/popup'
+export default {
+  name: "formTemplate",
+  data() {
+    return {
+      isPhone: false,
+      isCompany: false,
+      checkboxGroup: [],
+      currentDate: new Date(),
+      currentTime:"",
+      timePicker:false,
+      timeValue: [],
+      dateValue: [],
+      showPicker: false,
+      selectPicker:false,
+      dateTimePicker: false,
+      datePicker:false,
+      showCalendar: false,
+      radio: [],
+      selectValue: [],
+      pickerValue: [],
+      showArea: false,
+      dateTimeValue: [],
+      dateTimeValue1: [],
+      showDateTimePicker: false,
+      showDateTimePicker1: false,
+      pickerId: 0,
+      dateId: 0,
+      timeId: 0,
+      selectId: 0,
+      dateTimeId: 0,
+      column: [
+        {
+          values: '', // 设置的页面初始值
+          className: "column1"
+        },
+        {
+          values: '',
+          className: "column2",
+        },
+        {
+          values: '',
+          className: "column3",
+        }
+      ],
+      pageShow: false, //省市区三级联动是否显示（因为是接口返回的数据，等三级数据渲染完毕之后，在显示三级联动）
+      cityDates: '', //安联当前选中市的所有区所有数据
+      data: [],//接口返回所有级联数据
+      dateTimeRange: '',
+      selectValues: [],
+      cascadeValue: [],
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 11, 31),
+      disableds: false,
+      submitValue: '提交',
+      clickPicker: '',
+      columns: [],
+      copyForm: [],
+      cascaderId:0,
+      formShow:[],
+      uploadAvatarParams: {
+        token: "8c98087dfd2d48f856d8c95c09115def",
+      },
+      fileListList:[],
+      keyValue:'',
+      selectKey:'',
+      filedId:'',
+      disabled:false,
+      dialogVisible:false,
+      dialogImageUrl:'',
+      fileUpload:false,
+      videoFlag:false,
+      videoUploadPercent:false,
+      fileType:['PICTURE','VIDEO','AUDIO'],
+      loading:'',
+      ossConfig: {
+        region: "oss-cn-zhangjiakou",
+        //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
+        accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
+        accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
+        // stsToken: '<Your securityToken(STS)>',
+        bucket: "guoranopen-zjk",
+      },
+      hideUploadEdit:false,
+      limitNum:1,
+      ckeditor: {
+        editor: CKEDITOR.ClassicEditor,
+        editorConfig: {
+          extraPlugins: [MyimageUpload,MyCustomUploadAdapterPlugin],
+          toolbar: [
+            'MyimageUpload'
+          ]
+        },
+      },
+      refShowPicker:false,
+      refTemplateList:{},
+      refList:{},
+      dataQuery:{},
+      drawer:false,
+      detailField:{
+        formField:{}
+      },
+      checkDatas:[],
+      selectPopUp:false,
+      options:[],
+      defaultValue:[],
+      timeDetailData:{},
+      selectDetail:{}
+    }
+  },
+  props: {
+    formList: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    type:String,
+    disable:Boolean,
+    submit:Boolean,
+    usePropStyleType:{
+      type:Boolean,
+      default() {
+        return false;
+      }
+    },
+    propIsPhone: {
+      type:Boolean,
+      default() {
+        return false;
+      }
+    },
+    propIsCompany: {
+      type:Boolean,
+      default() {
+        return false;
+      }
+    },
+    uploadUrl: {
+      type:String,
+      default(){
+        return '/open/media/file/upload'
+      }
+    }
+  },
+  computed:{
+    acceptType:function () {
+      return '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF'
+    },
+    formFieldRelation:function () {
+      let arr = [];
+      let formList = []
+      formList = this.formShow.form && this.formShow.form.formFieldRelation
+      formList.forEach(item=> {
+        if (item.fieldId !=='workorder_name' && item.display && item.formField.type!=='CHAT_RECORD' && item.formField.type!=='CHANNEL') {
+          arr.push(item);
+        }
+      })
+      arr.forEach(item=>{
+        this.$set(item,'relationDisplay',this.relationSet(item.formField,'dependentFieldId'))
+        if(item.formField.type === 'CHECKBOX'){
+          if(!item.value){
+            item.value = []
+          }
+          if(item.formField.defaultValue && (!item.value || !item.value.length)){
+            item.value = item.formField.defaultValue
+          }
+        }
+        if (item.formField.type === 'EXPLAIN'){
+          if (!item.value){
+            item.value = item.formField.extInfo.placeholder?item.formField.extInfo.placeholder:''
+          }
+        }
+      })
+      let newArr = arr.filter(item=>item.relationDisplay)
+      console.debug('arr',arr,newArr)
+      return newArr;
+    },
+    acceptFieldType(){
+      return (type)=>{
+        console.debug('type',type)
+        if (type == 'FILE'){
+          return '*'
+        } else if( type == 'IMAGE') {
+          return 'image/*'
+        } else if(type == 'VIDEO') {
+          return 'video/*'
+        } else {
+          return '*'
+        }
+      }
+    },
+    isRequiredFn(){
+      return function(field) {
+        return this.relationSet(field,'requiredDependentFieldId')
+      }
+    }
+  },
+  components:{
+    myPopup,
+    Tree,
+    selectPopup
+  },
+  mounted() {
+    this.isMobile()
+  },
+  beforeCreate() {
+    // 等待dom渲染完毕之后，再去显示 三级联动。
+    that=this
+    this.$nextTick(function () {
+      this.pageShow = true;
+    })
+  },
+  created() {
+    if(this.disable===true)
+    {
+      this.disableds=true
+      this.submitValue = '已提交'
+    }
+    else
+    {
+      this.disableds=false
+      this.submitValue = '提交'
+    }
+  },
+  beforeMount() {
+    that.defaultClick()
+  },
+  methods: {
+    getMoldTime(){
+      let otherTime = {}
+      this.formList.form && this.formList.form.formFieldRelation.forEach(item=>{
+        if ((item.formField.type==='TIME_PICKER' || item.formField.type==='TIME_PICKER_RANGE') && item.formField.extInfo.mold==='OTHER'){
+          let pattern = item.formField.extInfo.pattern
+          let yearVal = pattern.indexOf('YEAR')!==-1
+          let monthVal = pattern.indexOf('MONTH')!==-1
+          let dayVal = pattern.indexOf('DAY')!==-1
+          let hourVal = pattern.indexOf('HOUR')!==-1
+          let minuteVal = pattern.indexOf('MINUTE')!==-1
+          let secondVal = pattern.indexOf('SECOND')!==-1
+          if ((yearVal||monthVal||dayVal)&&(!hourVal&&!minuteVal&&!secondVal)){
+            otherTime[item.fieldId]='DATE'
+          }
+          else if ((yearVal||monthVal||dayVal)&&(hourVal||minuteVal||secondVal)){
+            otherTime[item.fieldId]='DATE_TIME'
+          }
+          else if ((hourVal||minuteVal||secondVal)&&(!yearVal&&!monthVal&&!dayVal)){
+            otherTime[item.fieldId]='TIME'
+          }
+        }
+      })
+      return otherTime
+    },
+    setOptions(extInfo){
+      let options = []
+      console.debug('cascadeDown',extInfo)
+      if (extInfo.cascadeDown.options){
+        options = extInfo.cascadeDown.options
+        return options
+      }
+      else if (extInfo.cascadeDown[0]){
+        options = extInfo.cascadeDown[0].options
+      }
+      return  options
+    },
+    onReady(){
+
+
+    },
+    beforeRead(file,type){
+      console.debug('file',file)
+      console.debug('fileType',!Array.isArray(file))
+      if (!Array.isArray(file)){
+        if (type === 'IMAGE'){
+          const isLte2M = file.size / 1024 / 1024 <= 8;
+          const isSupportedFormat =file.type.indexOf('image')!==-1
+          if (!isSupportedFormat){
+            this.$message.error("只能上传图片格式");
+            return false
+          }
+          if (!isLte2M&&isSupportedFormat) {
+            this.$message.error("上传图片大小不能超过 8MB!");
+            return false
+          }
+          return true
+        }
+        else if (type === 'VIDEO'){
+          const isLte2M = file.size / 1024 / 1024 <= 100;
+          const isSupportedFormat =file.type.indexOf('video')!==-1
+          if (!isSupportedFormat){
+            this.$message.error("只能上传视频格式");
+            return false
+          }
+          if (!isLte2M&&isSupportedFormat) {
+            this.$message.error("上传视频大小不能超过100MB!");
+            return false
+          }
+          return true
+        }
+        else if (type === 'FILE' || type === 'ATTACHMENT'){
+          const isLte2M = file.size / 1024 / 1024 <= 100;
+          if (!isLte2M) {
+            this.$message.error("上传附件大小不能超过100MB!");
+            return false
+          }
+          return true
+        }
+      }
+      else{
+        let length = 0
+        if (this.fileListList[this.filedId]){
+          length = this.fileListList[this.filedId].length
+        }
+        if (file.length<=this.limitNum-length){
+          for (let i=0;i<file.length;i++){
+            if (type === 'IMAGE'){
+              const isLte2M = file.size / 1024 / 1024 <= 8;
+              const isSupportedFormat =file.type.indexOf('image')!==-1
+              if (!isSupportedFormat){
+                this.$message.error("只能上传图片格式");
+                return false
+              }
+              if (!isLte2M&&isSupportedFormat) {
+                this.$message.error("上传图片大小不能超过 8MB!");
+                return false
+              }
+              return true
+            }
+            else if (type === 'VIDEO'){
+              const isLte2M = file.size / 1024 / 1024 <= 100;
+              const isSupportedFormat =file.type.indexOf('video')!==-1
+              if (!isSupportedFormat){
+                this.$message.error("只能上传视频格式");
+                return false
+              }
+              if (!isLte2M&&isSupportedFormat) {
+                this.$message.error("上传视频大小不能超过100MB!");
+                return false
+              }
+              return true
+            }
+            else if (type === 'FILE' || type === 'ATTACHMENT'){
+              const isLte2M = file.size / 1024 / 1024 <= 100;
+              if (!isLte2M) {
+                this.$message.error("上传附件大小不能超过100MB!");
+                return false
+              }
+              return true
+            }
+          }
+        }
+        else {
+          let num = 1
+          if (this.limitNum){
+            num = this.limitNum
+          }
+          let messageText = '仅支持上传'+num+'个'
+          this.$message.error(messageText);
+          return false
+        }
+
+      }
+
+    },
+    //文件上传至服务器
+    afterRead(file){
+      this.fileUpload=true
+      console.debug(file)
+      console.debug(!Array.isArray(file))
+      if (!Array.isArray(file)){
+        this.uploadImgFun(file.content,file.file.name,file,file.file);
+      }
+      else {
+        let num = 1
+        if (this.limitNum){
+          num = this.limitNum
+        }
+        if (file.length >num){
+          this.$message.warning('仅支持上传'+num+'张图片')
+          return false
+        }
+        else {
+          for (let i = 0; i < file.length; i++){
+            this.uploadImgFun(file[i].content,file[i].file.name,file[i],file[i].file);
+          }
+        }
+      }
+    },
+    uploadImgFun(content,name,fileCon,file){
+      console.log(fileCon)
+      let imageData = {
+        urls:[]
+      }
+      let imageInfo = {
+        name:"",
+        status:'',
+        url:''
+      }
+      let res = multipartUpload(
+              this.ossConfig,
+              file,
+              null,
+              imageInfo
+      );
+      res.then((res) => {
+        console.log("upload result:", res);
+        // let filePath = res.name;
+        imageData.urls.push({
+          name:res.name,
+          url:ossFileUrl(this.ossConfig, res.name),
+          status:'success'
+        })
+        imageInfo.url = ossFileUrl(this.ossConfig, res.name)
+        imageInfo.status='success'
+        imageInfo.name=res.name
+        for (let j=0;j<this.fileListList[this.filedId].length;j++){
+          if (this.fileListList[this.filedId][j].content&&this.fileListList[this.filedId][j].content===content){
+            this.fileListList[this.filedId][j].name=res.name
+            this.fileListList[this.filedId][j].status='success'
+            this.fileListList[this.filedId][j].url=imageInfo.url
+            delete this.fileListList[this.filedId][j].content
+          }
+        }
+        this.fileUpload=false
+      }).catch((err) => {
+        console.debug("upload err", err);
+      });
+
+    },
+    dataURLtoFileFun (dataurl, filename) {
+      // 将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
+      let arr = dataurl.split(",");
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let n = bstr.length;
+      let u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, { type: mime });
+    },
+    //初始化默认值
+    defaultClick() {
+      for (let i = 0; i < this.formList.form.formFieldRelation.length; i++){
+        let type = this.formList.form.formFieldRelation[i].formField.type
+        let extInfo = this.formList.form.formFieldRelation[i].formField.extInfo
+        if(type ==='SELECT' || type === 'CHECKBOX' || type === 'RADIO' || type === 'OPTION') {
+          if(extInfo && !extInfo.option){
+            if(extInfo.exinfo){
+              for (let j=0; j < extInfo.exinfo.length; j++){
+                  this.$set(extInfo.exinfo[j],'label',extInfo.exinfo[j].value)
+              }
+              this.$set(extInfo,'option',extInfo.exinfo)
+            }
+            if (extInfo.option){
+              if (type === 'RADIO') {
+                for (let j = 0; j < extInfo.option.length; j++) {
+                  if(!extInfo.option[j].value) {
+                    extInfo.option[j].value=extInfo.option[j].label
+                  }
+                }
+                if(!this.formList.form.formFieldRelation[i].value){
+                  for (let j = 0; j < extInfo.option.length; j++) {
+                    if (extInfo.option[j]._default === 'true') {
+                      this.formList.form.formFieldRelation[i].value = extInfo.option[j].value
+                    }
+                  }
+                }
+              }
+              if (type === 'CHECKBOX') {
+                for (let j = 0; j < extInfo.option.length; j++) {
+                  if (!extInfo.option[j].value) {
+                    extInfo.option[j].value = extInfo.option[j].label
+                  }
+                }
+                if (!this.formList.form.formFieldRelation[i].value || this.formList.form.formFieldRelation[i].value.length === 0){
+                  this.formList.form.formFieldRelation[i].value = []
+                  for (let j = 0; j < extInfo.option.length; j++) {
+                    if (extInfo.option[j]._default === 'true') {
+                      this.formList.form.formFieldRelation[i].value[0] = extInfo.option[j].value
+                    }
+                  }
+                }
+              }
+            }
+          }
+          else {
+            if (extInfo && extInfo.options) {
+              if (type === 'RADIO') {
+                for (let j = 0; j < extInfo.options.length; j++) {
+                  if(!extInfo.options[j].value)
+                  {
+                    extInfo.options[j].value=extInfo.options[j].label
+                  }
+                }
+                if(!this.formList.form.formFieldRelation[i].value)
+                {
+                  for (let j = 0; j < extInfo.option.length; j++) {
+                    if (extInfo.options[j]._default === 'true') {
+                      this.formList.form.formFieldRelation[i].value = extInfo.options[j].value
+                    }
+                  }
+                }
+              }
+              if (type === 'CHECKBOX') {
+                for (let j = 0; j < extInfo.options.length; j++) {
+                  if (extInfo.options[j].value === '') {
+                    extInfo.options[j].value = extInfo.options[j].label
+                  }
+                }
+
+                if (!this.formList.form.formFieldRelation[i].value ||this.formList.form.formFieldRelation[i].value.length === 0)
+                {
+                  this.formList.form.formFieldRelation[i].value=[]
+                  for (let j = 0; j < extInfo.options.length; j++) {
+                    if (extInfo.options[j]._default === 'true') {
+                      this.formList.form.formFieldRelation[i].value[0] = extInfo.options[j].value
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+        }
+        if (type ==='FILE'){
+          if (this.formList.form.formFieldRelation[i].value!==undefined){
+            if (this.formList.form.formFieldRelation[i].value===null||this.formList.form.formFieldRelation[i].value===''){
+              this.formList.form.formFieldRelation[i].value=[]
+            }
+            else {
+              let valueList=[]
+              let bool=false
+              if(this.formList.form.formFieldRelation[i].value.length > 0) {
+                  for (let file=0;file<this.formList.form.formFieldRelation[i].value.length;file++) {
+                    let type = typeof (this.formList.form.formFieldRelation[i].value[file])
+                    if (type === "string") {
+                      bool = true
+                      valueList[file] = {}
+                      valueList[file].url = this.formList.form.formFieldRelation[i].value[file]
+                    }
+                    if (type === 'object'&&JSON.stringify(this.formList.form.formFieldRelation[i].value[file])!=='{}') {
+                      this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=this.formList.form.formFieldRelation[i].value
+                    }
+                    else {
+                      this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=[]
+                    }
+                  }
+                  if (bool){
+                    this.fileListList[this.formList.form.formFieldRelation[i].fieldId]=valueList
+                  }
+              }
+            }
+          }
+
+
+
+        }
+      }
+      for (let i = 0; i < this.formList.form.formFieldRelation.length; i++) {
+        let type = this.formList.form.formFieldRelation[i].formField.type
+        let extInfo = this.formList.form.formFieldRelation[i].formField.extInfo
+        if (type === 'CASCADER') {
+          let fieldValue = this.formList.form.formFieldRelation[i].formField.extInfo.fieldValue?this.formList.form.formFieldRelation[i].formField.extInfo.fieldValue:[]
+          this.checkDatas[this.formList.form.formFieldRelation[i].fieldId] = fieldValue
+          if (this.formList.form.formFieldRelation[i].value){
+            this.formList.form.formFieldRelation[i].value = this.formList.form.formFieldRelation[i].formField.defaultValue?
+                this.formList.form.formFieldRelation[i].formField.defaultValue:[];
+          }
+
+        }
+        if (type === 'DATE_PICKER') {
+          if(this.formList.form.formFieldRelation[i].value!==null && this.formList.form.formFieldRelation[i].value!=='' ) {
+            this.dateValue[this.formList.form.formFieldRelation[i].fieldId]=this.formatDate(this.formList.form.formFieldRelation[i].value)
+          }
+        }
+        if (type === 'TIME_PICKER') {
+          if(this.formList.form.formFieldRelation[i].value!==''&& this.formList.form.formFieldRelation[i].value!==null)
+          {
+            const dateTime = new Date(this.formList.form.formFieldRelation[i].value)
+            if (!this.formList.form.formFieldRelation[i].formField.extInfo.mold ||
+                this.formList.form.formFieldRelation[i].formField.extInfo.mold == 'TIME' ||
+                this.getMoldTime(this.formList.form.formFieldRelation[i].formField.formField) == 'TIME'){
+              this.timeValue[this.formList.form.formFieldRelation[i].fieldId]=dateTime.Format('hh:mm')
+            }
+            else if (this.formList.form.formFieldRelation[i].formField.extInfo.mold == 'DATA_TIME' ||
+                this.formList.form.formFieldRelation[i].formField.extInfo.mold == 'DATE_TIME' ||
+                this.getMoldTime(this.formList.form.formFieldRelation[i].formField.formField) == 'DATE_TIME'){
+              this.timeValue[this.formList.form.formFieldRelation[i].fieldId] = dateTime.Format('yyyy-MM-dd hh:mm')
+            }
+            else if (this.formList.form.formFieldRelation[i].formField.extInfo.mold == 'DATA' ||
+                this.formList.form.formFieldRelation[i].formField.extInfo.mold == 'DATE' ||
+                this.getMoldTime(this.formList.form.formFieldRelation[i].formField.formField) == 'DATE'){
+              this.timeValue[this.formList.form.formFieldRelation[i].fieldId] = dateTime.Format('yyyy-MM-dd')
+            }
+          }
+        }
+        if (type === 'SELECT' || type === 'OPTION') {
+          if (extInfo && extInfo.option){
+            for (let j = 0; j < extInfo.option.length; j++) {
+              if (extInfo.option[j].value === '') {
+                extInfo.option[j].value = extInfo.option[j].label
+              }
+            }
+            if(this.formList.form.formFieldRelation[i].value) {
+              for (let j = 0; j < extInfo.option.length; j++) {
+                if (this.formList.form.formFieldRelation[i].value === extInfo.option[j].value) {
+                  this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = extInfo.option[j].label
+                }
+              }
+            } else {
+              for (let j = 0; j < extInfo.option.length; j++) {
+                if (extInfo.option[j]._default === 'true') {
+                  this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = extInfo.option[j].label
+                  this.formList.form.formFieldRelation[i].value=extInfo.option[j].value
+                }
+              }
+            }
+          } else {
+            if(extInfo && extInfo.option) {
+              for (let j = 0; j < extInfo.options.length; j++) {
+                if (extInfo.options[j].value === '') {
+                  extInfo.options[j].value = extInfo.options[j].label
+                }
+              }
+            }
+            if(this.formList.form.formFieldRelation[i].value && extInfo && extInfo.option) {
+              for (let j=0;j<extInfo.options.length;j++) {
+                if (this.formList.form.formFieldRelation[i].value === extInfo.options[j].value) {
+                  this.selectValues[this.formList.form.formFieldRelation[i].fieldId] =extInfo.options[j].label
+                }
+              }
+            } else {
+              if(extInfo && extInfo.option) {
+                for (let j = 0; j < extInfo.options.length; j++) {
+                  if (extInfo.options[j]._default === 'true') {
+                    this.selectValues[this.formList.form.formFieldRelation[i].fieldId] = extInfo.options[j].label
+                    this.formList.form.formFieldRelation[i].value=extInfo.options[j].value
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      this.formShow = this.formList
+    },
+    addZero(i) {
+      if (i < 10) {
+        i = "0" + i;
+      }
+      return i;
+    },
+    formatter(type, value) {
+      // 格式化选择器日期
+      if (type === "year") {
+        return `${value}年`;
+      } else if (type === "month") {
+        return `${value}月`;
+      } else if (type === "day") {
+        return `${value}日`;
+      } else if (type === "hour") {
+        return `${value}时`;
+      } else if (type === "minute") {
+        return `${value}分`;
+      }
+      return value;
+    },
+
+    isMobile() {
+      if (this.usePropStyleType === false){
+        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+        if (flag) {
+          this.isPhone=true
+        }
+        else {
+          this.isCompany=true
+        }
+      }else {
+        this.isPhone=this.propIsPhone;
+        this.isCompany=this.propIsCompany;
+      }
+    },
+    //时间的选择器
+    onConfirm(value, id,item,type) {
+      console.debug('value',value)
+      if (type == 'DATE'){
+        this.datePicker = false
+        this.timeDetailData.value = value;
+        this.timeValue[id] =this.formatDate(value);
+      }
+      else if (type == 'TIME'){
+        this.timePicker = false;
+        this.timeValue[id] = value;
+        console.debug('timeDetailData',this.timeDetailData)
+        this.timeDetailData.value = forMatTime(value)
+      }
+      else if (type == 'DATE_TIME'){
+        this.dateTimePicker = false;
+        this.timeDetailData.value = value
+        this.timeValue[id] =this.formatDate(value) +" "+ this.addZero(value.getHours()) + ':' + this.addZero(value.getMinutes())
+      }
+      /*for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+        if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
+          this.formShow.form.formFieldRelation[i].value = value
+          if (!item.formField.extInfo.mold||item.formField.extInfo.mold==='DATA_TIME'){
+            this.timeValue[id] =this.formatDate(value) +" "+ this.addZero(value.getHours()) + ':' + this.addZero(value.getMinutes())
+            this.dateTimePicker = false;
+          }
+          else {
+            this.timeValue[id] =this.formatDate(value)
+            this.datePicker = false;
+          }
+          break
+        }
+      }*/
+    },
+    //转换日期的函数
+    formatDate(date) {
+      const dateTime = new Date(date)
+      return `${dateTime.getFullYear()}-${dateTime.getMonth() + 1}-${dateTime.getDate()}`;
+    },
+    //日期的选择器
+    onConfirmCalendar(date, item) {
+      fieldId
+      this.dateValue[item.fieldId] = this.formatDate(date);
+      item.value = date;
+      this.showCalendar = false;
+     /* for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+        if (this.formShow.form.formFieldRelation[i].fieldId === id) {
+          this.dateValue[id] = this.formatDate(date)
+          this.formShow.form.formFieldRelation[i].value = date
+          this.showCalendar = false;
+          break
+        }
+      }*/
+    },
+    //下拉的选择器
+    onConfirmSelect(value, item) {
+      console.log('value',value,this.selectDetail)
+      this.selectValues[this.selectDetail.fieldId] = value;
+      for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+        if (this.formShow.form.formFieldRelation[i].fieldId === this.selectDetail.fieldId) {
+          let options = this.formShow.form.formFieldRelation[i].formField.extInfo.option?this.formShow.form.formFieldRelation[i].formField.extInfo.option:this.formShow.form.formFieldRelation[i].formField.extInfo.options;
+          for (let j=0;j<options.length;j++){
+            if (value == options[j].label){
+              this.selectDetail.value = options[j].value
+            }
+          }
+          /*if (this.formShow.form.formFieldRelation[i].formField.extInfo.option){
+            for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.option.length; j++) {
+              if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].label)
+              {
+                this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.option[j].value
+              }
+            }
+          }
+          else {
+            for (let j = 0; j < this.formShow.form.formFieldRelation[i].formField.extInfo.options.length; j++) {
+              if(value ===this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].label)
+              {
+                this.formShow.form.formFieldRelation[i].value = this.formShow.form.formFieldRelation[i].formField.extInfo.options[j].value
+              }
+            }
+          }*/
+          this.showPicker = false;
+          break
+        }
+      }
+    },
+    //提交按钮事件
+    submitClick() {
+
+      for (let i=0;i<this.formShow.form.formFieldRelation.length;i++)
+      {
+        if(this.formShow.form.formFieldRelation[i].formField.type==='CASCADER')
+        {
+          let cascader = []
+          if (this.formShow.form.formFieldRelation[i].formField.extInfo.cascade){
+            cascader = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade
+          }
+          else if (this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown.options){
+            cascader = this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown.options
+          }
+          else if (this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0]){
+            cascader = this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options
+          }
+          cascader.forEach(item=>{
+            if(item.children!==undefined){
+              if(item.children.length===0) {
+                delete item.children
+              } else {
+                item.children.forEach(items=>{
+                  if(items.children){
+                    if(items.children.length===0) {
+                      delete items.children
+                    }
+                  }
+                })
+              }
+            }
+          })
+        }
+        if (this.fileListList[this.formShow.form.formFieldRelation[i].fieldId]!== undefined) {
+          let value=[]
+          this.fileListList[this.formShow.form.formFieldRelation[i].fieldId].forEach(item=>{
+            let file = {}
+            file.name = item.name
+            file.url = item.url
+            value.push(file)
+          })
+          this.formShow.form.formFieldRelation[i].value=value
+        }
+        if(this.formShow.form.formFieldRelation[i].display &&
+            (this.formShow.form.formFieldRelation[i].required || this.isRequiredFn(this.formShow.form.formFieldRelation[i].formField)) &&
+            this.formShow.form.formFieldRelation[i].fieldId!=='workorder_name'&&
+            this.formShow.form.formFieldRelation[i].formField.type !== 'EXPLANATION') {
+          let value = this.formShow.form.formFieldRelation[i].value && this.formShow.form.formFieldRelation[i].value.includes('\n')?this.formShow.form.formFieldRelation[i].value:'';
+          let strVal = '';
+            if(value){
+            strVal = value.replace(/\n/g,'');
+          }
+          let bool = this.formShow.form.formFieldRelation[i].value && this.formShow.form.formFieldRelation[i].value.includes('\n') && !strVal
+            if(!this.formShow.form.formFieldRelation[i].value || bool|| (this.formShow.form.formFieldRelation[i].value&&this.formShow.form.formFieldRelation[i].value.length===0)) {
+              this.$message.error('请完善'+ this.formShow.form.formFieldRelation[i].formField.name)
+              return
+            }
+        }
+      }
+        this.$emit('submitClick',this.formShow)
+        this.disableds = true
+        this.submitValue = '已提交'
+    },
+    //日期的点击事件
+    dateClick(id) {
+      if(this.disableds === false)
+      {
+        for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+          if (this.formShow.form.formFieldRelation[i].fieldId === id) {
+            this.dateId = id
+            this.showCalendar = true
+            break
+          }
+        }
+      }
+
+    },
+    //时间的点击事件
+    timeClick(id,item,type) {
+      if (this.disableds){
+        return
+      }
+      this.timeDetailData = item
+      if (type == 'DATE'){
+        this.datePicker = true
+      }
+      else if (type == 'TIME'){
+        this.timePicker = true
+      }
+      else if (type == 'DATE_TIME'){
+        this.dateTimePicker = true
+      }
+    },
+    //下拉的点击事件
+    selectClick(id,type,item) {
+      console.debug('111')
+      if (this.disableds){
+        return
+      }
+      this.selectDetail = item
+      if(type == 'client') {
+        let selectOption
+        this.selectValue=[]
+        for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+          if(this.formShow.form.formFieldRelation[i].formField.type==='SELECT' || this.formShow.form.formFieldRelation[i].formField.type==='OPTION')
+          {
+            if (this.formShow.form.formFieldRelation[i].fieldId === id) {
+              selectOption = this.formShow.form.formFieldRelation[i].formField.extInfo.option?this.formShow.form.formFieldRelation[i].formField.extInfo.option:this.formShow.form.formFieldRelation[i].formField.extInfo.options?this.formShow.form.formFieldRelation[i].formField.extInfo.options:[]
+              for (let j = 0; j < selectOption.length; j++) {
+                this.selectValue[j] = selectOption[j].label
+              }
+
+            }
+          }
+        }
+        this.selectId = id
+        this.showPicker = true
+      } else if (type == 'ref'){
+        this.refShowPicker = true
+      } else if (type == 'select'){
+        this.selectPicker = true;
+      }
+      if (item){
+        this.detailField = item;
+      }
+    },
+    SelectClear(fieldId) {
+      if(this.disableds === false){
+        let i = this.formShow.form.formFieldRelation.findIndex(item => { console.log(item.fieldId); return item.fieldId == fieldId })
+        this.selectValues[this.formShow.form.formFieldRelation[i].fieldId] = ''
+        this.$forceUpdate()
+      }
+    },
+    //级联的点击的事件
+    pickerClick(id) {
+      if(this.disableds === false)
+      {
+        if(this.pickerId!==id)
+        {
+          for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+            if (this.formShow.form.formFieldRelation[i].fieldId === id) {
+              this.keyValue=''
+              if(this.formShow.form.formFieldRelation[i].value.length!==undefined)
+              {
+                for (let m=0;m<this.formShow.form.formFieldRelation[i].value.length;m++)
+                {
+                  this.keyValue+=this.formShow.form.formFieldRelation[i].value[m]
+                }
+              }
+              this.data  = []
+              if (this.formShow.form.formFieldRelation[i].formField.extInfo.cascade){
+                this.data  = this.formShow.form.formFieldRelation[i].formField.extInfo.cascade
+              }
+              else if (this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown.options){
+                this.data  = this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown.options
+              }
+              else if (this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0]){
+                this.data  = this.formShow.form.formFieldRelation[i].formField.extInfo.cascadeDown[0].options
+              }
+              this.column[0].values = Object.values(this.data).map(function (e) {
+                return {text: e.value, code: e.value}
+              })
+              if (this.data[0].children !== undefined) {
+                this.column[1].values = Object.values(this.data[0].children).map(function (e) {
+                  return {text: e.value, code: e.value}
+                })
+                if (this.data[0].children[0].children !== undefined) {
+                  this.column[2].values = Object.values(this.data[0].children[0].children).map(function (e) {
+                    return {text: e.value, code: e.value}
+                  })
+                }
+                else {
+                  this.$set(this.data[0].children[0], 'children', [])
+                  this.column[2].values=Object.values(this.data[0].children[0].children).map(function (res) {
+                    return {text: res.value, code: res.value};
+                  })
+                }
+              }
+            }
+          }
+        }
+
+        this.pickerId = id
+        this.showArea = true
+      }
+
+
+    },
+    onChange(picker, values,index) {
+      // 这里我有可能渲染的有问题，导致回调每次都修改了当前列，其他值没有修改，当前列？？（当前列什么鬼呀，什么垃圾啊？？？） 解释一下 ↓↓
+      // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
+      // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
+      // 回调时修改第2列数据
+      if (index == 0){
+        picker.setColumnValues(2, []); // 防止突然选中第一个，第二个是更新的，但第三个联级不更新，我暂时强制清空
+      }
+      let ColumnIndexss=picker.getIndexes()
+      let testValue=''
+      this.$nextTick(()=>{
+        if(index == 0)
+        {
+          if(this.data[ColumnIndexss[0]].children.length > 0)
+          {
+            if(this.data[ColumnIndexss[0]].children[0]!==undefined)
+            {
+              testValue=this.data[ColumnIndexss[0]].children[0].value
+              picker.setColumnValues(2, this.county(this.data, testValue));
+            }
+          }
+          else
+            picker.setColumnValues(2, []);
+        }
+        if(index == 1)
+        {
+          if(this.data[ColumnIndexss[0]].children.length > 0)
+          {
+            if(this.data[ColumnIndexss[0]].children[ColumnIndexss[1]]!==undefined)
+            {
+              testValue=this.data[ColumnIndexss[0]].children[ColumnIndexss[1]].value
+              picker.setColumnValues(2, this.county(this.data, testValue));
+            }
+          }
+          else
+            picker.setColumnValues(2, []);
+        }
+      })
+
+      picker.setColumnValues(1, this.cityDate(this.data, values[0].text));
+      // 回调时修改第3列数据
+
+
+    },
+    // 修改级联第二级 这里不再多说什么了根据自己的数据格式来
+    cityDate(data, province) {
+      var that = this;
+      data.forEach(function (res) {
+        if (res.value == province) {
+          that.cityDates = res;
+        }
+      });
+      if (that.cityDates.children !== undefined&&that.cityDates.children.length > 0) {
+        return that.cityDates.children.map(function (res) {
+          return {text: res.value, code: res.value};
+        })
+      } else {
+        this.$set(that.cityDates, 'children', [])
+        return that.cityDates.children.map(function (res) {
+          return {text: res.value, code: res.value};
+        })
+      }
+      // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
+    },
+    // 修改级联第三级 这里不再多说什么了根据自己的数据格式来
+    county(data, county) {
+      var that = this;
+      var countyDate = '';
+      // 因为vant的 van-picker 回调只会返回你修改的那一列，比如现在为 [北京，北京，东城区]，你修改了省为[天津市，天津市，和平区]，但是vant的change回调会得到[天津市,北京,东城区],后面两个在回调中没有修改，不知道我的渲染方法有问题还是什么问题。
+      // 所以我在这里判断change事件触发后，如果你修改了省份的话，回调里面省份会改变，但是市和区还是上一个省份的 市和区，这时我们执行回调修改省，市，区的时候，因为回调只有省改变了，市和区DOM改变了，但是回调里面没改变的问题（不晓得什么问题）,这时我们去找省下面的 市，我们取回调的市名称，如果在省下面没有找到这个市，默认展示第一个市，区也默认展示第一个市下面的区，如果遍历市能查到，就去展示对应的市。
+      that.cityDates.children.forEach(function (res) {
+        if (res.value == county) {
+          countyDate = res;
+        }
+      });
+      // 这里如果没有找到对应的县
+      if (countyDate == '') {
+        if(that.cityDates.children.length > 0)
+        {
+          countyDate = that.cityDates.children[0];
+        }
+
+      }
+      // return 县
+      if (countyDate.children === undefined) {
+        this.$set(countyDate, 'children', [])
+        return countyDate.children.map(function (res) {
+          return {text: res.value, code: res.value};
+        })
+      } else {
+        return countyDate.children.map(function (res) {
+          return {text: res.value, code: res.value};
+        })
+      }
+
+      // return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:'北京市',code:'1'},{text:'河南省',code:'2'},...],如果你不需要code直接这样就可以 例['北京市','河南省',.....]
+    },
+    //点击级联弹出框的确认按钮
+    onConfirms(val, id) {
+      let test = ''
+      for (let i = 0; i < val.length; i++) {
+        if (val[i] !== undefined) {
+          test += val[i].text + '/'
+        }
+      }
+      test = test.substr(0, test.length - 1)
+      for (let i = 0; i < this.formShow.form.formFieldRelation.length; i++) {
+        if (this.formShow.form.formFieldRelation[i].fieldId=== id) {
+          this.cascadeValue[id] = test
+          for (let j = 0; j < val.length; j++) {
+            if (val[j] !== undefined) {
+              this.formShow.form.formFieldRelation[i].value[j] = val[j].text
+            }
+          }
+          break
+        }
+      }
+      this.showArea = false;
+      sessionStorage.setItem('cascader',test)
+    },
+    onCancel() {
+      this.showArea = false;
+    },
+    aliyunOssRequest(data){
+
+      this.loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.8)'
+      });
+      let file = data.file;
+      console.debug("upload file:", file);
+      let imgInfo = {
+        status:'',
+        url:'',
+        name:''
+      }
+      /* let imageData = {
+         id:cid,
+         cid:cid,
+         type: "IMAGE",
+         content: {
+           urls: [],
+           progress: 0,
+         },
+       };*/
+      let res = multipartUpload(
+              this.ossConfig,
+              file,
+              null,
+              imgInfo
+      );
+      res.then((res) => {
+        console.debug("upload result:", res);
+        // let filePath = res.name;
+        /* imageData.content.progress = 1;
+         imageData.content.urls.push(
+                 ossFileUrl(this.ossConfig, res.name)
+         );
+         console.log('imageData',imageData)*/
+        imgInfo.url = ossFileUrl(this.ossConfig, res.name)
+        imgInfo.status='success'
+        if (data.file){
+          imgInfo.name = data.file.name
+          imgInfo.uid = data.file.uid
+        }
+        if (!this.fileListList[this.filedId])
+        {
+          this.fileListList[this.filedId] = []
+        }
+        this.fileListList[this.filedId].push(imgInfo)
+        this.loading.close()
+      }).catch((err) => {
+        console.debug("upload err", err);
+      });
+    },
+    successUpload(response,file,fileList){
+      if (!this.fileListList[this.filedId]){
+        this.fileListList[this.filedId] = []
+      }
+      for (let i=0;i<fileList.length;i++){
+        if (!this.fileListList[this.filedId][i]){
+          this.fileListList[this.filedId][i]={}
+        }
+        this.fileListList[this.filedId][i].url=fileList[i].url
+        this.fileListList[this.filedId][i].name=fileList[i].name
+        this.fileListList[this.filedId][i].status=fileList[i].status
+      }
+    },
+    uploadProgress(){
+      this.loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+    },
+    handleRemove(file) {
+      if (this.fileListList[this.filedId]){
+        for (let i=0;i<this.fileListList[this.filedId].length;i++)
+        {
+          if (this.fileListList[this.filedId][i].uid){
+            if (this.fileListList[this.filedId][i].uid===file.uid){
+              this.fileListList[this.filedId].splice(i,1)
+              return
+            }
+          }
+          else if (this.fileListList[this.filedId][i].url===file.url){
+            this.fileListList[this.filedId].splice(i,1)
+            return
+          }
+        }
+
+      }
+    },
+    handleEditChange(file,fileList){
+      this.hideUploadEdit=fileList.length >= this.limitNum
+    },
+    onUploadProgress: function (progress, point, file, videoData) {
+      console.debug("upload video progress", progress, point);
+      if (progress === 1) {
+        // this.loadingIns.close();
+        videoData.content.url = ossFileUrl(this.ossConfig, point.name);
+        // this.chooseVideo({data:url},file);
+
+      } else {
+        videoData.content.progress = progress;
+
+      }
+    },
+    checkUpload(id,extInfo){
+      this.filedId=id
+      this.limitNum = extInfo.limitNum?extInfo.limitNum:(extInfo.limit?extInfo.limit:1)
+
+    },
+    beforeAvatarUpload(file,type){
+      if (type === 'IMAGE'){
+        const isLte2M = file.size / 1024 / 1024 <= 8;
+        const isSupportedFormat =file.type.indexOf('image')!==-1
+        if (!isSupportedFormat){
+          this.$message.error("只能上传图片格式");
+          return false
+        }
+        if (!isLte2M) {
+          this.$message.error("上传图片大小不能超过 8MB!");
+          return false
+        }
+        return true
+      }
+      else if (type === 'VIDEO'){
+        const isLte2M = file.size / 1024 / 1024 <= 100;
+        const isSupportedFormat =file.type.indexOf('video')!==-1
+        if (!isSupportedFormat){
+          this.$message.error("只能上传视频格式");
+          return false
+        }
+        if (!isLte2M&&isSupportedFormat) {
+          this.$message.error("上传视频大小不能超过100MB!");
+          return false
+        }
+        return true
+      }
+      else if (type === 'FILE' || type === 'ATTACHMENT'){
+        const isLte2M = file.size / 1024 / 1024 <= 100;
+        if (!isLte2M) {
+          this.$message.error("上传附件大小不能超过100MB!");
+          return false
+        }
+        return true
+      }
+
+    },
+    exceedUpload(){
+      this.$message({
+        message:"上传文件数量达到上限",
+        duration:2000,
+        type:'warning'
+      })
+    },
+
+    handlePictureCardPreview(file) {
+      this.videoFlag = true;
+      this.videoUploadPercent = file.percentage.toFixed(0);
+    },
+    refTemplateVisibleChange(visible,field) {
+      let fields = field.formField.type === 'REF' ? field.formField.extInfo.ref.field : field.formField.extInfo.ref.vars
+      if (visible) {
+        if (
+          !this.refTemplateList[field.fieldId] || this.dataQuery[field.fieldId].hasNextPage
+        ) {
+          this.$set(this.refTemplateList, field.fieldId, [])
+          !this.dataQuery[field.fieldId] &&   this.$set(this.dataQuery,field.fieldId, {
+            filterId: '',
+            keywords: '',
+            pageInfo: {
+              pageNo: 1,
+              pageSize: 20
+            },
+            sortInfos: [],
+            templateId: ''
+          })
+          this.getTemplateList(field.formField.extInfo.ref.source, fields, field)
+        }
+      }
+    },
+    getTemplateList(templateId, fieldId, field) {
+      let url = '/order-api/data-template/data/page'
+      this.dataQuery[field.fieldId].templateId = templateId
+      // let dataQuery = {
+      //   filterId: '',
+      //   keywords: '',
+      //   pageInfo: {
+      //     pageNo: 1,
+      //     pageSize: 20
+      //   },
+      //   sortInfos: [],
+      //   templateId: templateId
+      // }
+      this.$http.post(url, this.dataQuery[field.fieldId]).then(res => {
+        if (res.data.code === '0') {
+          let list = res.data.data.data
+          this.dataQuery[field.fieldId].hasNextPage = res.data.data.hasNextPage
+          // this.isHasNext[field.id] = res.data.data.hasNextPage
+          let templateList = []
+          templateList = list.map(res => {
+            let info = {}
+            for (let key in res.fieldValues) {
+              if (Array.isArray(fieldId)) {
+                let vals = ''
+                let values = ''
+                fieldId.forEach(val => {
+                  vals += val
+                  if (res.fieldValues[val]) {
+                    values += res.fieldValues[val]
+                  }
+                })
+                info[vals] = values
+                info.id = res.id
+                info.name = values
+              } else {
+                if (fieldId === key) {
+                  info[key] = res.fieldValues[key]
+                  info.id = res.id
+                  info.name = res.fieldValues[key]
+                }
+              }
+            }
+            return info
+          })
+          this.$nextTick(() =>{
+            this.$set(this.refTemplateList,field.fieldId,[
+              ...this.refTemplateList[field.fieldId],
+              ...templateList
+            ])
+          })
+        }
+      })
+    },
+    lodeMore(item) {
+      this.dataQuery[item.fieldId].pageInfo.pageNo += 1
+      this.refTemplateVisibleChange(true,item)
+    },
+    //打开级联/下拉抽屉选择
+    openDrawer(field,type){
+      this.detailField = field;
+      console.debug('type',type)
+      if (type == 'cascader' || type === 'pc_cascader'){
+        if (type == 'cascader'){
+          this.showArea = true;
+        }
+        else {
+          this.drawer = true;
+        }
+        this.$nextTick(()=>{
+          let arr =  this.checkDatas[field.fieldId]?this.checkDatas[field.fieldId]:[]
+          console.debug('drawerTree',this.$refs.drawerTree)
+          let drawerTree = this.$refs.drawerTree
+          if (drawerTree){
+            drawerTree.forEach(item=>{
+              item.$refs.dataTree.setCheckedNodes (arr);
+              item.checked = this.checkDatas[field.fieldId] && this.checkDatas[field.fieldId][0]?this.checkDatas[field.fieldId][0].value:'';
+            })
+          }
+
+        })
+      }
+      else if (type === 'select'){
+        this.options = field.formField.extInfo.option?field.formField.extInfo.option:field.formField.extInfo.options;
+        this.selectPopUp = true;
+        if (!this.detailField.value){
+          return
+        }
+        if (Array.isArray(this.detailField.value)){
+          this.defaultValue = this.detailField.value
+        }
+        else {
+          this.defaultValue = [this.detailField.value]
+        }
+        console.debug('selectPopUp',this.selectPopUp,this.options)
+      }
+    },
+    //保存级联数据
+    saveData(checkList,checkDatas){
+      this.$set(this.detailField,'value',checkList);
+      this.checkDatas[this.detailField.fieldId] = checkDatas;
+      this.$set(this.detailField.formField.extInfo,'fieldValue',this.checkDatas)
+      this.$forceUpdate();
+      this.showArea = false;
+      this.drawer = false;
+    },
+    //保存所选下拉值
+    confirmSelect(option, list){
+      console.debug('option',option,list)
+      this.detailField.value = list;
+      this.selectPopUp = false
+      this.selectPicker = false
+    },
+    //保存ref类型值
+    confirmRefSelect(option, list){
+      console.debug('options',option,list)
+      if (!option || !list){
+        this.refShowPicker = false;
+        return
+      }
+      this.detailField.value = list;
+      let val = option?option.map(item=>{
+        return item.name
+      }):[]
+      this.selectValue[this.detailField.fieldId] = val;
+      this.refShowPicker = false;
+    },
+    // 一个重复的方法 兼容 状态优先级 的关联控件，
+    relationSet(field,list) {
+      let flag = false
+      console.debug('field',field,field.extInfo && field.extInfo[list])
+      // 如果在extInfo下有该字段，表示已被关联，否则根据 类型去判断 retrun true 或者false
+      if(field.extInfo && field.extInfo[list] && Object.keys(field.extInfo[list]).length !== 0) {
+        for (const key in field.extInfo[list]) {
+          const element = field.extInfo[list][key];
+          let orderFieldValue = ""
+          for (let i=0;i<this.formShow.form.formFieldRelation.length;i++){
+            if (key === this.formShow.form.formFieldRelation[i].fieldId || key === this.formShow.form.formFieldRelation[i].formField.workOrderFieldId){
+              orderFieldValue = this.formShow.form.formFieldRelation[i].value
+              break
+            }
+          }
+          console.debug('orderFieldValue',orderFieldValue)
+          if(orderFieldValue) {
+            if(Array.isArray(orderFieldValue)) {
+              if(Array.isArray(element)) {
+                for (let index = 0; index < element.length; index++) {
+                  flag = orderFieldValue.some(item =>{ return item == element[index] })
+                  if(flag) {
+                    return flag
+                  }
+                }
+              } else {
+                flag = orderFieldValue.some(item =>{ return item == element })
+                if(flag) {
+                  return flag
+                }
+              }
+            } else {
+              if(Array.isArray(element)) {
+                for (let index = 0; index < element.length; index++) {
+                  flag =  element[index] == orderFieldValue
+                  if(flag) {
+                    return flag
+                  }
+                }
+              } else {
+                flag =  element == orderFieldValue
+                if(flag) {
+                  return flag
+                }
+              }
+
+            }
+          }
+          else if(list == 'dependentFieldId') {
+            return  flag = false
+          }
+        }
+      } else if(list == 'dependentFieldId') {
+        return flag = true
+      } else if(list == 'requiredDependentFieldId') {
+        return flag = false
+      }
+      return flag
+    },
+  },
+  watch:{
+    formFieldValus:{
+      handler(value){
+        console.log(value);
+      },
+      deep:true
+    }
+  }
+
+
+
+}
+</script>
+
+<style lang="less" scoped>
+.notClick {
+  pointer-events: none;
+}
+.formClass{
+  /* border: 1px solid #ebebeb;*/
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  border-radius: 15px;
+  .explanation{
+    display: flex;
+    padding: 4px;
+    .explanation-p{
+      color: #366aff;
+      font-size: 14px;
+      margin: 10px 4px;
+      .el-icon-info{
+        margin-right: 8px;
+      }
+    }
+  }
+  .explain-url{
+    a{
+      color:#366aff ;
+    }
+  }
+  .titleName{
+    font-size: 1em;
+    text-align: center;
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+   /* border-bottom: 1px solid #EEEEEE;*/
+  }
+  .title-link{
+    height: 1px;
+    background-color: #EEEEEE;
+  }
+  .bottom-link{
+    margin-top: 14px;
+    height: 1px;
+    background-color: #EEEEEE;
+  }
+  .form-submit-btn{
+    padding: 14px 16px 0 16px;
+    text-align: center;
+  }
+  /deep/.ck.ck-editor{
+   padding: 0 8px;
+  }
+  /deep/.ck.ck-toolbar{
+    border-color:#E0E6F7;
+    border-top-left-radius: 9px!important;
+    border-top-right-radius: 9px!important;
+  }
+  /deep/.ck.ck-editor__editable_inline{
+    border-color:#E0E6F7;
+    min-height: 150px!important;
+    border-bottom-left-radius: 9px!important;
+    border-bottom-right-radius: 9px!important;
+  }
+  .cascader-class{
+    padding: 10px 16px;
+  }
+  .cascader-input{
+    -webkit-appearance: none;
+    background-image: none;
+    border: 1px solid #E0E6F7;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    outline: 0;
+    padding: 0 15px;
+    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+    width: 100%;
+    background-color: transparent!important;
+    border-radius: 9px!important;
+    cursor: pointer;
+    font-size: 14px;
+  }
+  .cascader-name{
+    color: #A9B3C6;
+    font-size: 1em;
+    padding-bottom: 8px;
+  }
+}
+.pcFormClass{
+  width: 400px;
+  margin: 0 auto;
+  .field-item{
+    padding: 8px 0;
+    .field-item-name{
+      padding-bottom: 8px;
+      color: #A9B3C6;
+     /* color: #000000;*/
+    }
+  }
+  /deep/.el-input__inner{
+    border-color: #E0E6F7!important;
+    background-color: transparent!important;
+    border-radius: 9px!important;
+  }
+  /deep/.el-textarea__inner{
+    border-color: #E0E6F7!important;
+    background-color: transparent!important;
+    border-radius: 9px!important;
+    padding: 9px 15px!important;
+  }
+  .upload-demo{
+    background-color: #FFFFFF;
+    border: 1px solid #E0E6F7;
+    border-radius: 10px;
+    width: 74px;
+    height: 74px;
+    vertical-align: top;
+    cursor: pointer;
+    text-align: center;
+    font-size:28px;
+    color:#366AFF;
+    display: -webkit-box;
+    align-items: center;
+    justify-content: center;
+    i{
+      color: #366AFF;
+    }
+    /deep/.el-upload{
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  /deep/.el-upload--picture-card{
+    background-color: #FFFFFF;
+    border: 1px solid #E0E6F7;
+    border-radius: 10px;
+    width: 74px;
+    height: 74px;
+    vertical-align: top;
+    cursor: pointer;
+    text-align: center;
+    font-size:28px;
+    color:#366AFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i{
+      color: #366AFF;
+    }
+  }
+  /deep/.el-select-dropdown__item.selected{
+    color: #366aff;
+  }
+  /deep/.el-upload-list--picture-card{
+    .el-upload-list__item{
+      width: 74px;
+      height: 74px;
+      border-radius: 10px;
+    }
+  }
+  /deep/.el-upload-list__item-name{
+    max-width: 180px;
+  }
+  .hide .el-upload--picture-card {
+    display: none!important;
+  }
+}
+/deep/.van-radio__icon--checked .van-icon{
+  background-color: #366aff!important;
+  border-color: #366aff!important;
+}
+/deep/.van-checkbox__icon--checked .van-icon{
+  background-color: #366aff!important;
+  border-color: #366aff!important;
+}
+/deep/.vant-upload--picture-card{
+  background-color: #ffffff;
+  border: 1px solid #E0E6F7;
+  border-radius: 10px;
+  width: 74px;
+  height: 74px;
+  vertical-align: top;
+  cursor: pointer;
+  text-align: center;
+  font-size:28px;
+  color:#8c939d;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  i{
+    color: #366aff;
+  }
+}
+/deep/.van-popup{
+  border-radius: 5px;
+}
+.remPhoneClassForm{
+  .mobileFormClass{
+    width: calc(100vw - 110px);
+    background-color: white;
+    .form-field-item{
+      .form-field-item-value{
+        /deep/.van-cell{
+          flex-direction: column;
+          padding: 8px 16px;
+        }
+        /deep/.van-cell__value{
+          border: 1px solid #E0E6F7;
+          border-radius: 9px;
+          min-height: 40px;
+          padding: 0 10px;
+        }
+        /deep/.van-cell__right-icon{
+          color: #999999!important;
+        }
+        .form-field-item-file{
+          padding: 10px 16px;
+          .fileName{
+            padding-bottom: 8px;
+            color: #A9B3C6;
+           /* color: #000000;*/
+          }
+        }
+        .workorder_description{
+         /* padding: 8px 16px;*/
+          padding: 8px 0;
+          /*font-size: 14px;*/
+          .field-name{
+            width: 100%;
+            text-align: left;
+            color: #A9B3C6;
+           /* color: #000000;*/
+            line-height: 1;
+            padding-bottom: 8px;
+          }
+          /*.required-name{
+            margin-left: -6px;
+          }*/
+
+         /* /deep/.ck-content .image img{
+            max-width: 200px!important;
+          }*/
+        }
+      }
+      .form-field-item-other{
+        /deep/.van-cell{
+          flex-direction: column;
+        }
+        /deep/.van-cell__value{
+          min-height: 40px;
+        }
+      }
+      .explan-ation{
+        .explan-ation-div{
+          display: flex;
+         /* padding: 4px 16px;*/
+          padding: 4px;
+        }
+        .explan-ation-p{
+          color: #366aff;font-size: 14px;margin: 16px 4px;
+        }
+      }
+    }
+    .upload-phone-demo{
+      /deep/.el-upload--picture-card{
+        background-color: #fbfdff;
+        border: 1px dashed #c0ccda;
+        border-radius: 6px;
+        width: 74px;
+        height: 74px;
+        vertical-align: top;
+        cursor: pointer;
+        text-align: center;
+        font-size:28px;
+        color:#8c939d;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      /deep/.el-upload-list--picture-card .el-upload-list__item{
+        height: 76px;
+        width: 76px;
+      }
+    }
+    /deep/.van-image__img{
+      border-radius: 10px;
+    }
+  }
+  .submitClass{
+    min-width: 100px;
+    background-color: #366aff;
+    color: white!important;
+    height: 32px;
+    i{
+      padding-right: 8px;
+      font-weight: 600;
+    }
+  }
+  /deep/.van-radio-group--horizontal{
+   .van-radio{
+      min-width: 100px;
+      max-width: 260px;
+      flex: none;
+    }
+    .van-radio--horizontal{
+      padding: 0.3rem 0;
+      margin-right: 6px;
+    }
+  }
+  /deep/.van-checkbox-group--horizontal{
+    .van-checkbox{
+      min-width: 100px;
+      max-width: 260px;
+      flex: none;
+    }
+    .van-checkbox--horizontal{
+      padding: 0.3rem 0;
+      margin-right: 6px;
+    }
+  }
+  /deep/.van-button--info{
+    border:1px solid #366aff;
+  }
+  /deep/.van-field__label{
+    width: 100%;
+    text-align: left;
+    color: #A9B3C6!important;
+ /*   color: #000000!important;*/
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    padding-bottom: 8px;
+    font-size: 1em;
+  }
+
+  /deep/.van-field__control{
+    min-height: 40px;
+  }
+  /deep/textarea{
+    padding: 7px 0;
+  }
+  /deep/.van-dropdown-menu__bar{
+    box-shadow: none!important;
+  }
+  /deep/.van-overlay{
+    background-color: rgba(0,0,0,.4);
+  }
+}
+
+.remCompanyClassForm{
+  width: 100%;
+  font-size: 1em;
+  .submitClass{
+    min-width: 100px;
+    color: white!important;
+    background-color:#366aff;
+    border-color: #366aff;
+    i{
+      padding-right: 8px;
+      font-weight: 600;
+    }
+  }
+  /deep/.el-checkbox-group{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .el-checkbox{
+      padding: 8px 0;
+      min-width:150px;
+      max-width: 280px;
+      flex: none;
+      display: flex;
+      overflow: hidden;
+      margin-right: 0;
+      display: flex;
+      align-items:center;
+    }
+    .el-checkbox__label{
+      font-size: 1em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  /deep/.el-radio-group{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .el-radio{
+      padding: 8px 0;
+      min-width:150px;
+      max-width: 280px;
+      flex: none;
+      display: flex;
+      overflow: hidden;
+      margin-right: 0;
+    }
+    .el-radio__label{
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 1em;
+    }
+  }
+
+  /deep/.el-radio__input.is-checked+.el-radio__label{
+    color: #366aff!important;
+  }
+  /deep/.el-radio__input.is-checked .el-radio__inner{
+    color: #366aff!important;
+    border-color:  #366aff!important;
+    background: #366aff!important;
+  }
+  /deep/.el-checkbox__input.is-checked+.el-checkbox__label{
+    color: #366aff!important;
+  }
+  /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+    background-color: #366aff!important;
+    border-color: #366aff!important;
+  }
+  /deep/.ck .ck-icon {
+    width: 14px !important;
+    height: 14px !important;
+  }
+}
+.drawer-container{
+  height: 100%;
+  overflow: hidden;
+}
 </style>