askbot-dragon 0.7.56 → 0.7.59

package/src/components/formTemplate.vue

@@ -1,1950 +1,1970 @@
-<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="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"
-                :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"
-              v-if="item.fieldId!=='workorder_clientId'"
-              right-icon="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"
-              v-if="item.fieldId==='workorder_clientId'"
-              right-icon="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.limitNum!==undefined?item.formField.extInfo.limitNum:1'
-                :after-read="afterRead"
-                accept="image/*"
-                :multiple=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>
-let that
-import {multipartUpload,ossFileUrl} from "./utils/AliyunIssUtil";
-import {MyCustomUploadAdapterPlugin} from "./utils/ckeditor";
-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: [MyCustomUploadAdapterPlugin],
-          toolbar: [
-            'imageUpload'
-          ]
-        },
-      },
-
-    }
-  },
-  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: {
-    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
-      }
-
-    },
-    //级联的点击的事件
-    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;
-  }
-}
-
+<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;
+  }
+}
+
 </style>