更新

src/components/VueFormMaking/components/GenerateFormItem.vue

@@ -1,46 +1,69 @@
 <template>
   <el-form-item
     v-if="showStatus && !widget.hidden"
-    :label-width="isLabel===false||!widget.options.labelWidthStatus?'0px': 150 + 'px'"
-    :label="isLabel===false||widget.type==='divider' || !widget.options.labelWidthStatus?'':widget.name"
+    :label-width="
+      isLabel === false || !widget.options.labelWidthStatus ? '0px' : 150 + 'px'
+    "
+    :label="
+      isLabel === false ||
+      widget.type === 'divider' ||
+      !widget.options.labelWidthStatus
+        ? ''
+        : widget.name
+    "
     :prop="propValue"
     :class="parentForm"
-    :style="subformIndex !== undefined?{'margin-bottom': '0'}: {}"
+    :style="subformIndex !== undefined ? { 'margin-bottom': '0' } : {}"
   >
     <template v-if="preview">
       <template v-if="widget.type === 'color'">
-        <div style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px" :style="{'background-color': dataModel}" />
-      </template>
-      <template v-else-if="widget.type=='switch'">
-        <el-switch
-          v-model="dataModel"
-          :disabled="true"
+        <div
+          style="width: 32px; height: 20px; margin-top: 6px; border-radius: 3px"
+          :style="{ 'background-color': dataModel }"
         />
       </template>
+      <template v-else-if="widget.type == 'switch'">
+        <el-switch v-model="dataModel" :disabled="true" />
+      </template>
       <template v-else-if="widget.type === 'editor'">
         <div class="previewEditorDiv" v-html="dataModel" />
       </template>
 
-      <template v-else-if="widget.type=='file'">
-        <div v-for="(uploadUrlItem, uploadUrlIndex) of dataModel" :key="uploadUrlIndex">
+      <template v-else-if="widget.type == 'file'">
+        <div
+          v-for="(uploadUrlItem, uploadUrlIndex) of dataModel"
+          :key="uploadUrlIndex"
+        >
           <i style="color: #909399;" class="el-icon-document" />
           <span>{{ uploadUrlItem.name || uploadUrlItem.url }}</span>
-          <el-button round size="mini" @click="onDownload(uploadUrlItem, 'download')">下载</el-button>
-          <el-button round type="primary" @click="onDownload(uploadUrlItem)" v-if="checkFileSuffix(uploadUrlItem.url)" size="mini">预览</el-button>
+          <el-button
+            round
+            size="mini"
+            @click="onDownload(uploadUrlItem, 'download')"
+            >下载</el-button
+          >
+          <el-button
+            round
+            type="primary"
+            @click="onDownload(uploadUrlItem)"
+            v-if="checkFileSuffix(uploadUrlItem.url)"
+            size="mini"
+            >预览</el-button
+          >
           <!-- <a :href="uploadUrlItem.url" target="_blank">{{ uploadUrlItem.name || uploadUrlItem.url }}</a> -->
         </div>
       </template>
 
-      <template v-else-if="widget.type=='imgupload'">
+      <template v-else-if="widget.type == 'imgupload'">
         <fm-upload
           v-model="dataModel"
-          :style="{'width': widget.options.width}"
+          :style="{ width: widget.options.width }"
           :width="widget.options.size.width"
           :height="widget.options.size.height"
           :preview="preview"
         />
       </template>
-      <template v-else-if="widget.type =='rate'">
+      <template v-else-if="widget.type == 'rate'">
         <el-rate
           v-model="dataModel"
           :max="widget.options.max"
@@ -58,15 +81,22 @@
               'font-size': widget.options.font_size,
               'font-family': widget.options.font_family,
               'font-weight': widget.options.font_weight,
-              'color': widget.options.font_color
+              color: widget.options.font_color
             }"
           >
             {{ widget.options.defaultValue }}
           </span>
         </el-divider>
       </template>
-      <template v-else-if="widget.type === 'input' && widget.options.showPassword">
-        <input :value="dataModel" type="password" style="border: none; background-color: #ffffff; color: #303133" disabled="disabled">
+      <template
+        v-else-if="widget.type === 'input' && widget.options.showPassword"
+      >
+        <input
+          :value="dataModel"
+          type="password"
+          style="border: none; background-color: #ffffff; color: #303133"
+          disabled="disabled"
+        />
       </template>
       <template v-else-if="widget.type === 'cascader'">
         <el-cascader
@@ -74,7 +104,11 @@
           class="preview-cascader-class"
           :disabled="true"
           :show-all-levels="widget.options.showAllLevels"
-          :options="widget.options.remote?widget.options.remoteOptions:widget.options.options"
+          :options="
+            widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options
+          "
         />
       </template>
       <template v-else-if="widget.type === 'textarea'">
@@ -94,14 +128,16 @@
     <template v-else>
       <template v-if="widget.type === 'input'">
         <el-input
-          v-if="widget.options.dataType === 'number'
-            || widget.options.dataType === 'integer'
-            || widget.options.dataType === 'float'"
+          v-if="
+            widget.options.dataType === 'number' ||
+              widget.options.dataType === 'integer' ||
+              widget.options.dataType === 'float'
+          "
           v-model="dataModel"
           :type="widget.options.dataType"
           @input="onInputChangeNumber($event)"
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           :disabled="widget.options.disabled"
           :show-password="widget.options.showPassword"
         />
@@ -111,7 +147,7 @@
           :type="widget.options.dataType"
           :disabled="widget.options.disabled"
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           :show-password="widget.options.showPassword"
         />
       </template>
@@ -123,14 +159,14 @@
           :rows="5"
           :disabled="widget.options.disabled"
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
         />
       </template>
 
       <template v-if="widget.type === 'number'">
         <el-input-number
           v-model="dataModel"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           :step="widget.options.step"
           controls-position="right"
           :disabled="widget.options.disabled"
@@ -140,17 +176,23 @@
       <template v-if="widget.type === 'radio'">
         <el-radio-group
           v-model="dataModel"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           :disabled="widget.options.disabled"
         >
           <el-radio
-            v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
             :key="index"
-            :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
             :label="item.value"
           >
             <template v-if="widget.options.remote">{{ item.label }}</template>
-            <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
           </el-radio>
         </el-radio-group>
       </template>
@@ -158,18 +200,23 @@
       <template v-if="widget.type === 'checkbox'">
         <el-checkbox-group
           v-model="dataModel"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           :disabled="widget.options.disabled"
         >
           <el-checkbox
-
-            v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
             :key="index"
-            :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
             :label="item.value"
           >
             <template v-if="widget.options.remote">{{ item.label }}</template>
-            <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
           </el-checkbox>
         </el-checkbox-group>
       </template>
@@ -187,11 +234,11 @@
           :clearable="widget.options.clearable"
           :arrow-control="widget.options.arrowControl"
           :value-format="widget.options.format"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
         />
       </template>
 
-      <template v-if="widget.type=='date'">
+      <template v-if="widget.type == 'date'">
         <el-date-picker
           v-model="dataModel"
           :type="widget.options.type"
@@ -202,13 +249,15 @@
           :disabled="widget.options.disabled"
           :editable="widget.options.editable"
           :clearable="widget.options.clearable"
-          :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
+          :value-format="
+            widget.options.timestamp ? 'timestamp' : widget.options.format
+          "
           :format="widget.options.format"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
         />
       </template>
 
-      <template v-if="widget.type =='rate'">
+      <template v-if="widget.type == 'rate'">
         <el-rate
           v-model="dataModel"
           :max="widget.options.max"
@@ -232,11 +281,22 @@
           :multiple="widget.options.multiple"
           :clearable="widget.options.clearable"
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           filterable
           @change="onChangeSelect"
         >
-          <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value" />
+          <el-option
+            v-for="item in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="item.value"
+            :value="item.value"
+            :label="
+              widget.options.showLabel || widget.options.remote
+                ? item.label
+                : item.value
+            "
+          />
         </el-select>
       </template>
 
@@ -248,10 +308,15 @@
           clearable
           filterable
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           :name="widget.model"
         >
-          <el-option v-for="item in organList" :key="item.id" :value="item.id" :label="item.name" />
+          <el-option
+            v-for="item in organList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
         </el-select>
       </template>
 
@@ -262,23 +327,25 @@
           :multiple="widget.options.multiple"
           clearable
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
           filterable
-           :loading="selectLoading"
+          :loading="selectLoading"
           @visible-change="onGetSchoolList"
         >
-          <el-option v-for="item in cooperationList" :key="item.id" :value="item.id" :label="item.name" />
+          <el-option
+            v-for="item in cooperationList"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
         </el-select>
       </template>
 
-      <template v-if="widget.type=='switch'">
-        <el-switch
-          v-model="dataModel"
-          :disabled="widget.options.disabled"
-        />
+      <template v-if="widget.type == 'switch'">
+        <el-switch v-model="dataModel" :disabled="widget.options.disabled" />
       </template>
 
-      <template v-if="widget.type=='slider'">
+      <template v-if="widget.type == 'slider'">
         <el-slider
           v-model="dataModel"
           :min="widget.options.min"
@@ -287,15 +354,15 @@
           :step="widget.options.step"
           :show-input="widget.options.showInput"
           :range="widget.options.range"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
         />
       </template>
 
-      <template v-if="widget.type=='imgupload'">
+      <template v-if="widget.type == 'imgupload'">
         <fm-upload
           v-model="dataModel"
           :disabled="widget.options.disabled"
-          :style="{'width': widget.options.width}"
+          :style="{ width: widget.options.width }"
           :width="widget.options.size.width"
           :height="widget.options.size.height"
           :token="widget.options.token"
@@ -310,15 +377,19 @@
         />
       </template>
 
-      <template v-if="widget.type=='file'">
-        <FileUpload :element="widget" :data-model="dataModel" @fileList="fileList" />
+      <template v-if="widget.type == 'file'">
+        <FileUpload
+          :element="widget"
+          :data-model="dataModel"
+          @fileList="fileList"
+        />
       </template>
 
       <template v-if="widget.type === 'editor'">
         <vue-editor
           v-model="dataModel"
           :disabled="widget.options.disabled"
-          :style="{width: widget.options.width}"
+          :style="{ width: widget.options.width }"
         />
       </template>
 
@@ -329,8 +400,12 @@
           :show-all-levels="widget.options.showAllLevels"
           :clearable="widget.options.clearable"
           :placeholder="widget.options.placeholder"
-          :style="{width: widget.options.width}"
-          :options="widget.options.remote?widget.options.remoteOptions:widget.options.options"
+          :style="{ width: widget.options.width }"
+          :options="
+            widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options
+          "
         />
       </template>
 
@@ -340,7 +415,7 @@
             'font-size': widget.options.font_size,
             'font-family': widget.options.font_family,
             'font-weight': widget.options.font_weight,
-            'color': widget.options.font_color
+            color: widget.options.font_color
           }"
         >
           {{ widget.options.defaultValue }}
@@ -357,7 +432,7 @@
               'font-size': widget.options.font_size,
               'font-family': widget.options.font_family,
               'font-weight': widget.options.font_weight,
-              'color': widget.options.font_color
+              color: widget.options.font_color
             }"
           >
             {{ widget.options.defaultValue }}
@@ -366,51 +441,60 @@
       </template>
     </template>
 
-    <el-drawer
-        :title="'预览'"
-        direction="rtl"
-        :visible.sync="open"
-        size="50%"
-      >
-        <div>
-          <iframe :src="previewUrl"></iframe>
-          <div style="text-align: center">
-            <el-button type="primary" @click="open = false">确定</el-button>
-          </div>
+    <el-drawer :title="'预览'" direction="rtl" :visible.sync="open" size="50%">
+      <div>
+        <iframe :src="previewUrl"></iframe>
+        <div style="text-align: center">
+          <el-button type="primary" @click="open = false">确定</el-button>
         </div>
-      </el-drawer>
+      </div>
+    </el-drawer>
   </el-form-item>
 </template>
 
 <script>
-import XLSX from 'xlsx'
-import FmUpload from './Upload'
-import FileUpload from './Upload/file'
-import {
-  getOrganCooperation
-} from '@/api/process/work-order'
+import XLSX from "xlsx";
+import FmUpload from "./Upload";
+import FileUpload from "./Upload/file";
+import { getOrganCooperation } from "@/api/process/work-order";
 export default {
-  name: 'GenetateFormItem',
+  name: "GenetateFormItem",
   components: {
     FmUpload,
     FileUpload
   },
   /* eslint-disable */
-  props: ['widget', 'models', 'propValue', 'parentForm', 'remote', 'data', 'disabled', 'preview', 'isLabel', 'subformIndex', 'subformModel', 'organList'],
+  props: [
+    "widget",
+    "models",
+    "propValue",
+    "parentForm",
+    "remote",
+    "data",
+    "disabled",
+    "preview",
+    "isLabel",
+    "subformIndex",
+    "subformModel",
+    "organList"
+  ],
   data() {
     return {
       open: false,
       showStatus: true,
-      widgetLabelWidth: '',
-      dataModel: this.subformIndex===undefined?
-        this.models[this.widget.model]:
-        this.models[this.subformModel][this.subformIndex][this.widget.model],
+      widgetLabelWidth: "",
+      dataModel:
+        this.subformIndex === undefined
+          ? this.models[this.widget.model]
+          : this.models[this.subformModel][this.subformIndex][
+              this.widget.model
+            ],
       dataModelStr: null,
       tableData: [],
       cooperationList: [],
       selectLoading: true,
-      previewUrl: '',
-    }
+      previewUrl: ""
+    };
   },
   watch: {
     dataModel: {
@@ -419,18 +503,20 @@ export default {
         // console.log(newValue, 'model', this.widget.model)
         if (newValue !== undefined && newValue !== null) {
           if (this.subformIndex !== undefined) {
-            this.models[this.subformModel][this.subformIndex][this.widget.model] = newValue
-            this.$emit('update:models', {
+            this.models[this.subformModel][this.subformIndex][
+              this.widget.model
+            ] = newValue;
+            this.$emit("update:models", {
               ...this.models,
               [this.subformModel]: this.models[this.subformModel]
-            })
+            });
             // this.$emit('input-change', val, this.widget.model, this.subformIndex)
           } else {
-            this.models[this.widget.model] = newValue
-            this.$emit('update:models', {
+            this.models[this.widget.model] = newValue;
+            this.$emit("update:models", {
               ...this.models,
               [this.widget.model]: newValue
-            })
+            });
             // this.$emit('input-change', val, this.widget.model)
           }
         }
@@ -442,26 +528,27 @@ export default {
         // console.log(val, 'show')
         if (val.status === undefined && val.status === null) {
           if (this.subformIndex === undefined) {
-            this.dataModel = val[this.widget.model]
+            this.dataModel = val[this.widget.model];
           } else {
-            this.dataModel = val[this.subformModel][this.subformIndex][this.widget.model]
+            this.dataModel =
+              val[this.subformModel][this.subformIndex][this.widget.model];
           }
         }
-        delete this.models.status
-        this.handleDisplayVerifiy()
+        delete this.models.status;
+        this.handleDisplayVerifiy();
       }
     },
     cooperationList: {
       deep: true,
       handler(val) {
-        if(this.widget.type == 'school' && this.preview) {
-          let tempStr = null
+        if (this.widget.type == "school" && this.preview) {
+          let tempStr = null;
           val.forEach(item => {
-            if(item.id == this.dataModel) {
-              tempStr = item.name
+            if (item.id == this.dataModel) {
+              tempStr = item.name;
             }
           });
-          this.dataModelStr = tempStr
+          this.dataModelStr = tempStr;
         }
       }
     }
@@ -469,293 +556,326 @@ export default {
   created() {
     // 判断当前元素是否是分部表单（）
     // console.log(this.widget, 'widget subform')
-    if(this.widget.type == 'organ' && this.preview) {
-      let tempStr = null
+    if (this.widget.type == "organ" && this.preview) {
+      let tempStr = null;
       this.organList.forEach(item => {
-        if(item.id == this.dataModel) {
-          tempStr = item.name
+        if (item.id == this.dataModel) {
+          tempStr = item.name;
         }
       });
-      this.dataModelStr = tempStr
+      this.dataModelStr = tempStr;
     }
     // 学校信息
-    if(this.widget.type == 'school' && this.preview) {
-      this.onGetSchoolList(true)
-    //   let tempStr = null
-    //   this.cooperationList.forEach(item => {
-    //     if(item.id == this.dataModel) {
-    //       tempStr = item.name
-    //     }
-    //   });
-    //   // this.dataModel = tempStr
+    if (this.widget.type == "school" && this.preview) {
+      this.onGetSchoolList(true);
+      //   let tempStr = null
+      //   this.cooperationList.forEach(item => {
+      //     if(item.id == this.dataModel) {
+      //       tempStr = item.name
+      //     }
+      //   });
+      //   // this.dataModel = tempStr
     }
 
-    if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
-      this.remote[this.widget.options.remoteFunc]((data) => {
+    if (
+      this.widget.options.remote &&
+      this.remote[this.widget.options.remoteFunc]
+    ) {
+      this.remote[this.widget.options.remoteFunc](data => {
         this.widget.options.remoteOptions = data.map(item => {
           return {
             value: item[this.widget.options.props.value],
             label: item[this.widget.options.props.label],
             children: item[this.widget.options.props.children]
-          }
-        })
-      })
+          };
+        });
+      });
     }
 
-    if (this.widget.type === 'imgupload' && this.widget.options.isQiniu) {
-      this.remote[this.widget.options.tokenFunc]((data) => {
-        this.widget.options.token = data
-      })
+    if (this.widget.type === "imgupload" && this.widget.options.isQiniu) {
+      this.remote[this.widget.options.tokenFunc](data => {
+        this.widget.options.token = data;
+      });
     }
 
     if (this.disabled !== undefined && this.disabled !== null) {
-      this.widget.options.disabled = this.disabled
+      this.widget.options.disabled = this.disabled;
     }
 
     // label width
     if (this.widget.options.labelWidthDisabled) {
-      this.widgetLabelWidth = this.widget.options.labelWidth
-    } else if (this.widget.type==='divider') {
-      this.widgetLabelWidth = 0
+      this.widgetLabelWidth = this.widget.options.labelWidth;
+    } else if (this.widget.type === "divider") {
+      this.widgetLabelWidth = 0;
     } else {
-      this.widgetLabelWidth = 150
+      this.widgetLabelWidth = 150;
     }
 
-    this.handleDisplayVerifiy()
-  },
-  mounted() {
+    this.handleDisplayVerifiy();
   },
+  mounted() {},
   methods: {
     // 获取学校列表
     onDownload(item, type) {
-      if(type == 'download') {
-        window.location.href = item.url
-        return
+      if (type == "download") {
+        window.location.href = item.url;
+        return;
       }
 
-      let urlArr = item.url.split('.')
-      let suffix = urlArr[urlArr.length-1]
-      if(suffix != 'pdf') {
-        this.previewUrl = 'https://view.officeapps.live.com/op/view.aspx?src=' + item.url
-        window.open(this.previewUrl)
-        return
+      let urlArr = item.url.split(".");
+      let suffix = urlArr[urlArr.length - 1];
+      if (suffix != "pdf") {
+        this.previewUrl =
+          "https://view.officeapps.live.com/op/view.aspx?src=" + item.url;
+        window.open(this.previewUrl);
+        return;
       } else {
-        this.previewUrl = this.validManageUrl() + '/pdf/web/viewer.html?file=' + item.url
-        window.open(this.previewUrl)
-        return
+        this.previewUrl =
+          this.validManageUrl() + "/pdf/web/viewer.html?file=" + item.url;
+        window.open(this.previewUrl);
+        return;
       }
     },
     // 教务地址
     validManageUrl() {
-      let url = window.location.href
-      let returnUrl = ''
-      if (/dev/.test(url)) { // dev 环境
-        returnUrl = 'http://mandev.dayaedu.com'
-      } else if (/test/.test(url)) { // dev 环境
-        returnUrl = 'http://mantest.dayaedu.com'
-      } else if (/online/.test(url)) { //线上
-        returnUrl = 'https://manonline.dayaedu.com'
-      } else { // 默认dev环境
-        returnUrl = 'http://mandev.dayaedu.com'
+      let url = window.location.href;
+      let returnUrl = "";
+      if (/dev/.test(url)) {
+        // dev 环境
+        returnUrl = "http://mandev.dayaedu.com";
+      } else if (/test/.test(url)) {
+        // dev 环境
+        returnUrl = "http://mantest.dayaedu.com";
+      } else if (/online/.test(url)) {
+        //线上
+        returnUrl = "https://manonline.dayaedu.com";
+      } else {
+        // 默认dev环境
+        returnUrl = "http://mandev.dayaedu.com";
       }
-      return returnUrl
+      return returnUrl;
     },
-    readWorkbookFromRemoteFile: function (url) {
-        var xhr = new XMLHttpRequest()
-        xhr.open('get', url, true)
-        xhr.responseType = 'arraybuffer'
-        let _this = this
-        xhr.onload = function (e) {
-          var binary = "";
-          console.log(xhr)
-          if (xhr.status === 200) {
-            var bytes  = new Uint8Array(xhr.response)
-            var length = bytes.byteLength;
-            for (var i = 0; i < length; i++) {
-              binary += String.fromCharCode(bytes[i]);
-            }
-            var wb = XLSX.read(binary, { type: "binary" });
-            var wsname = wb.SheetNames[0];
-            var ws = wb.Sheets[wsname];
-            console.log(ws)
-            var HTML = XLSX.utils.sheet_to_html(ws);
-            if (_this.$refs.preview) {
-              _this.$refs.preview.innerHTML = HTML;
-            }
+    readWorkbookFromRemoteFile: function(url) {
+      var xhr = new XMLHttpRequest();
+      xhr.open("get", url, true);
+      xhr.responseType = "arraybuffer";
+      let _this = this;
+      xhr.onload = function(e) {
+        var binary = "";
+        console.log(xhr);
+        if (xhr.status === 200) {
+          var bytes = new Uint8Array(xhr.response);
+          var length = bytes.byteLength;
+          for (var i = 0; i < length; i++) {
+            binary += String.fromCharCode(bytes[i]);
+          }
+          var wb = XLSX.read(binary, { type: "binary" });
+          var wsname = wb.SheetNames[0];
+          var ws = wb.Sheets[wsname];
+          console.log(ws);
+          var HTML = XLSX.utils.sheet_to_html(ws);
+          if (_this.$refs.preview) {
+            _this.$refs.preview.innerHTML = HTML;
           }
         }
-        xhr.send()
-      },
-      getData() {
-        let that = this;
-        let element = that.$refs.preview;
-        // Transform(element);
-        var initScale = 1;
-        this.af = new AlloyFinger(element, {
-          // rotate: function (evt) {  //实现旋转
-          //   element.rotateZ += evt.angle;
-          // },
-          multipointStart: function () {
-              initScale = element.scaleX;
-          },
-          pinch: function (evt) {   //实现缩放
-            element.scaleX = element.scaleY = initScale * evt.zoom;
-          },
-          pressMove: function (evt) {   //实现移动
-            element.translateX += evt.deltaX;
-            element.translateY += evt.deltaY;
-            evt.preventDefault();
-          },
-        });
-      },
+      };
+      xhr.send();
+    },
+    getData() {
+      let that = this;
+      let element = that.$refs.preview;
+      // Transform(element);
+      var initScale = 1;
+      this.af = new AlloyFinger(element, {
+        // rotate: function (evt) {  //实现旋转
+        //   element.rotateZ += evt.angle;
+        // },
+        multipointStart: function() {
+          initScale = element.scaleX;
+        },
+        pinch: function(evt) {
+          //实现缩放
+          element.scaleX = element.scaleY = initScale * evt.zoom;
+        },
+        pressMove: function(evt) {
+          //实现移动
+          element.translateX += evt.deltaX;
+          element.translateY += evt.deltaY;
+          evt.preventDefault();
+        }
+      });
+    },
     checkFileSuffix(url) {
-      let urlArr = url.split('.')
-      let suffix = urlArr[urlArr.length-1]
-      if(suffix == 'xlsx' || suffix == 'xls' || suffix == 'doc' || suffix == 'docx' || suffix == 'pdf') {
-        return true
+      let urlArr = url.split(".");
+      let suffix = urlArr[urlArr.length - 1];
+      if (
+        suffix == "xlsx" ||
+        suffix == "xls" ||
+        suffix == "doc" ||
+        suffix == "docx" ||
+        suffix == "pdf"
+      ) {
+        return true;
       } else {
-        return false
+        return false;
       }
     },
     // select 选择时触发
     onChangeSelect() {
-      let relationArray = []
+      let relationArray = [];
       // console.log(this.widget.options.options)
-      this.widget.options && this.widget.options.options.forEach(item => {
-          if(this.dataModel == item.value) {
-              let tempRelation = item.relationOptions || []
-              relationArray.push(...tempRelation)
+      this.widget.options &&
+        this.widget.options.options.forEach(item => {
+          if (this.dataModel == item.value) {
+            let tempRelation = item.relationOptions || [];
+            relationArray.push(...tempRelation);
           }
-      })
-      if(relationArray.length > 0) {
-          this.$emit('relationFormChange', relationArray)
+        });
+      if (relationArray.length > 0) {
+        this.$emit("relationFormChange", relationArray);
       }
     },
     fileCheckRequired(state) {
-      this.$emit('fileCheckRequired', state)
+      this.$emit("fileCheckRequired", state);
     },
     async onGetSchoolList(val) {
       // 隐藏的时候的不获取数据，
       // 为什么每次都需要请求，因为我没有判断分部数据是否有修改
-      if(!val) {
-        return
+      if (!val) {
+        return;
       }
-      let organId = null
-      this.selectLoading = true
-      if(this.subformModel) {
-        organId = this.models[this.subformModel][this.subformIndex][this.widget.options.displayRelation]
+      let organId = null;
+      this.selectLoading = true;
+      if (this.subformModel) {
+        organId = this.models[this.subformModel][this.subformIndex][
+          this.widget.options.displayRelation
+        ];
       } else {
-        organId = this.models[this.widget.options.displayRelation]
+        organId = this.models[this.widget.options.displayRelation];
       }
       // // 判断是否有选择分部 判断列表已经有数据了
-      if(organId) {
-        let res = await getOrganCooperation({ organId })
-        this.cooperationList = [...res.data]
+      if (organId) {
+        let res = await getOrganCooperation({ organId });
+        this.cooperationList = [...res.data];
       }
-      this.selectLoading = false
+      this.selectLoading = false;
     },
     // 处理用户输入的值 input框
     onInputChangeNumber(event) {
       // 不用处理string类型的
       // console.log(event, this.widget.options)
-      const type = this.widget.options.dataType
-      if(type == 'number' || type == 'integer') {
-        this.onVerifiyNumberInteger(event)
-      } else if(type == 'float') {
-        this.verifyNumberIntegerAndFloat(event)
+      const type = this.widget.options.dataType;
+      if (type == "number" || type == "integer") {
+        this.onVerifiyNumberInteger(event);
+      } else if (type == "float") {
+        this.verifyNumberIntegerAndFloat(event);
       }
     },
     verifyNumberIntegerAndFloat(val) {
       // val = this.ruleForm.test;
+      const t = val.charAt(0);
       // 匹配空格
       // console.log(val)
-      let v = val.replace(/(^\s*)|(\s*$)/g, '');
+      let v = val.replace(/(^\s*)|(\s*$)/g, "");
       // 只能是数字和小数点，不能是其他输入
-      v = v.replace(/[^\d.]/g, '');
+      v = v.replace(/[^\d.]/g, "");
       // 以0开始只能输入一个
-      v = v.replace(/^0{2}$/g, '0');
+      v = v.replace(/^0{2}$/g, "0");
       // 保证第一位只能是数字，不能是点
-      v = v.replace(/^\./g, '');
+      v = v.replace(/^\./g, "");
       // 小数只能出现1位
-      v = v.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
+      v = v
+        .replace(".", "$#$")
+        .replace(/\./g, "")
+        .replace("$#$", ".");
       // 小数点后面保留2位
-      v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
+      v = v.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
+      if (t == "-") {
+        v = "-" + v;
+      }
       // 返回结果
       this.dataModel = v;
     },
     onVerifiyNumberInteger(val) {
+      const t = val.charAt(0);
       // 匹配空格
-      let v = val.replace(/(^\s*)|(\s*$)/g, '');
+      let v = val.replace(/(^\s*)|(\s*$)/g, "");
       // 去掉 '.' , 防止贴贴的时候出现问题 如 0.1.12.12
-      v = v.replace(/[\.]*/g, '');
+      v = v.replace(/[\.]*/g, "");
       // 去掉以 0 开始后面的数, 防止贴贴的时候出现问题 如 00121323
-      v = v.replace(/(^0[\d]*)$/g, '0');
+      v = v.replace(/(^0[\d]*)$/g, "0");
       // 首位是0,只能出现一次
-      v = v.replace(/^0\d$/g, '0');
+      v = v.replace(/^0\d$/g, "0");
       // 只匹配数字
-      v = v.replace(/[^\d]/g, '');
+      v = v.replace(/[^\d]/g, "");
+      if (t == "-") {
+        v = "-" + v;
+      }
       // 返回结果
       this.dataModel = v;
     },
     fileList(files) {
       // 只处理乐团退费
-      const query = this.$route.query
-      if(query.processId == 19) {
-        if(files && files.length > 0) {
-          this.$emit('fileCheckRequired', true)
+      const query = this.$route.query;
+      if (query.processId == 19) {
+        if (files && files.length > 0) {
+          this.$emit("fileCheckRequired", true);
         } else {
-          this.$emit('fileCheckRequired', false)
+          this.$emit("fileCheckRequired", false);
         }
       } else {
-        this.$emit('fileCheckRequired', false)
+        this.$emit("fileCheckRequired", false);
       }
-      this.dataModel = files
+      this.dataModel = files;
     },
     handleDisplayVerifiy() {
-      if (Object.keys(this.widget.options).indexOf('displayVerifiy')>=0) {
-        if (this.widget.options.displayVerifiy.type !== 'hide') {
-          var c = 0
+      if (Object.keys(this.widget.options).indexOf("displayVerifiy") >= 0) {
+        if (this.widget.options.displayVerifiy.type !== "hide") {
+          var c = 0;
           for (var v of this.widget.options.displayVerifiy.list) {
             if (this.models[v.model].toString() === v.value) {
-              c++
+              c++;
             }
           }
-          if (this.widget.options.displayVerifiy.type === 'and') {
+          if (this.widget.options.displayVerifiy.type === "and") {
             if (c !== this.widget.options.displayVerifiy.list.length) {
-              this.showStatus = false
+              this.showStatus = false;
             } else {
-              this.showStatus = true
+              this.showStatus = true;
             }
-          } else if (this.widget.options.displayVerifiy.type === 'or')  {
+          } else if (this.widget.options.displayVerifiy.type === "or") {
             if (c === 0) {
-              this.showStatus = false
+              this.showStatus = false;
             } else {
-              this.showStatus = true
+              this.showStatus = true;
             }
           }
         }
       }
     },
     dataFormatBr(str) {
-      return str ? str.replace(/\n/ig, '<br />') : str
+      return str ? str.replace(/\n/gi, "<br />") : str;
     }
   }
-}
+};
 </script>
 
 <style>
-  .previewEditorDiv > p {
-    margin: 0;
-  }
-
-  .preview-cascader-class .el-input.is-disabled .el-input__inner {
-    background-color: #fff;
-    border: none;
-    color: #303133;
-  }
+.previewEditorDiv > p {
+  margin: 0;
+}
 
-  .preview-cascader-class .el-input.is-disabled .el-input__suffix .el-input__suffix-inner .el-input__icon.el-icon-arrow-down:before {
-    content: ''
-  }
+.preview-cascader-class .el-input.is-disabled .el-input__inner {
+  background-color: #fff;
+  border: none;
+  color: #303133;
+}
 
+.preview-cascader-class
+  .el-input.is-disabled
+  .el-input__suffix
+  .el-input__suffix-inner
+  .el-input__icon.el-icon-arrow-down:before {
+  content: "";
+}
 </style>