文件上传整合代码

 Source/ProjectWeb/src/components/PLT-basic-component/Upload-files.vue

@@ -1,10 +1,10 @@
<template>
  <el-dialog
    title="上传文件"
    :visible.sync="dialogVisible"
    append-to-body
    title="上传文件"
  >
    <Divider text="导入提示" left="30px"></Divider>
    <Divider left="30px" text="导入提示"></Divider>
    <ul>
      <li>
        1.红色字体表示必输项
@@ -13,26 +13,27 @@
        2.每次仅能最多导入10000条数据
      </li>
    </ul>
    <Divider text="excel文件，选择文件后会自动上传" left="30px"></Divider>
    <Divider left="30px" text="excel文件，选择文件后会自动上传"></Divider>
    <el-upload
      :before-upload="beforeUpload"
      :headers="uploadHeaders"
      :on-change="uploadChange"
      :on-error="onError"
      :on-success="onSuccess"
      :show-file-list="false"
      accept=".xlsx, .xls"
      action="/api/ubcs-code/codeClassify/importClassify"
      :on-success="onSuccess"
      :on-error="onError"
      :headers="uploadHeaders"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-change="uploadChange"
      class="upload-demo">
      <el-button size="small" type="primary" style="margin: 15px 35px">浏览文件</el-button>
      <el-button size="small" style="margin: 15px 35px" type="primary">浏览文件</el-button>
    </el-upload>
    <template #footer>
      <el-button
        type="primary"
        size="small"
        @click="downloadTemplateFun"
        :loading="downloadLoading"
      >下载导入模板</el-button
        size="small"
        type="primary"
        @click="downloadTemplateFun"
      >下载导入模板
      </el-button
      >
      <el-button size="small" @click="dialogVisible = false">关闭</el-button>
    </template>
@@ -43,6 +44,7 @@
// import {downloadErrorFile,downloadBatchImportApplyTemplate} from '@/api/template/templateAttr'
import {getToken} from "@/util/auth";
import func from "@/util/func";

export default {
  name: "Upload-files",
  props: {
@@ -55,21 +57,21 @@
      default: "",
    },
  },
  data(){
    return{
      flga:true,
  data() {
    return {
      flga: true,
      pageLoading: null,
      downloadLoading: false,
    }
  },
  watch:{
    visible:{
      handler(newval,oldval){
  watch: {
    visible: {
      handler(newval, oldval) {
        // console.log('newval',newval)
      }
    }
  },
  computed:{
  computed: {
    uploadHeaders() {
      return {
        "Blade-Auth": "bearer " + getToken(),
@@ -84,7 +86,7 @@
      },
    },
  },
  methods:{
  methods: {
    //文件上传前
    async beforeUpload(file) {
      const fileType = file.name.split(".").pop();
@@ -102,37 +104,37 @@
      return true;
    },
    // æ–‡ä»¶ä¸Šä¼ æˆåŠŸ
    onSuccess(resbonse){
    onSuccess(resbonse) {
      if (Object.keys(resbonse.data).length === 0) {
        this.$message.success( "上传成功！");
        this.$message.success("上传成功！");
        this.dialogVisible = false;
        return;
      }
      if (resbonse.data.fileOid) {
        const fileName = resbonse.data.filePath.split("/").pop();
        this.$message.error("请下载错误信息文件进行查看！");
        downloadErrorFile({ uuid: resbonse.data.fileOid }).then((res) => {
        downloadErrorFile({uuid: resbonse.data.fileOid}).then((res) => {
          func.downloadFileByBlobHandler(res);
        });
      }
    },
    //点击下载模板
    downloadTemplateFun(){
    downloadTemplateFun() {
      this.downloadLoading = true;
      downloadBatchImportApplyTemplate({codeClassifyOid: this.codeClassifyOid}).then(res=>{
        this.$utilFunc.downloadFileByBlob(res.data,  "模板文件.xls");
      downloadBatchImportApplyTemplate({codeClassifyOid: this.codeClassifyOid}).then(res => {
        this.$utilFunc.downloadFileByBlob(res.data, "模板文件.xls");
        this.downloadLoading = false;
      }).catch((res)=>{
      }).catch((res) => {
        this.$message.warning(res)
        this.downloadLoading = false;
      })
    },
    //文件上传失败
    onError(res){
    onError(res) {
      this.pageLoading.close();
    },
    //文件状态改变
    uploadChange(file){
    uploadChange(file) {
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
@@ -141,12 +143,13 @@
}
</script>

<style scoped lang="scss">
<style lang="scss" scoped>
ul {
  color: rgb(188, 188, 188);
  margin: 20px 0 20px 0;
  padding: 0 0 0 30px;
  list-style: none;

  li {
    margin-bottom: 5px;
    font-size: 13px;

 Source/ProjectWeb/src/components/PLT-basic-component/formUpload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,113 @@
<template>
  <!--
  directory å¼€å¯ç›®å½•
  -->
  <el-upload
    ref="uploadRef"
    :before-upload="handleBeforeUpload"
    :directory="true"
    :headers="uploadHeaders"
    :on-change="handleFileChange"
    :on-error="onError"
    :on-success="onSuccess"
    :show-file-list="false"
    action="https://jsonplaceholder.typicode.com/posts/"
    class="upload-demo"
    :accept="fileAccpet"
    drag
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或
      <el-link type="primary" @click="UploadSingleFile">上传单文件</el-link> &nbsp;
      <el-link type="success" @click="UploadFolder">上传文件夹</el-link>
    </div>
  </el-upload>
</template>

<script>
import {getToken} from "@/util/auth";
import func from "@/util/func";

export default {
  name: "formUpload",
  // props:{
  //   fileAccpet:String,
  //   defalut:'.img,.xls,.png,.xlsx'
  // },
  data() {
    return {
      pageLoading: null,
      fileAccpet:'.img,.xls,.png,.xlsx'
    }
  },
  computed: {
    uploadHeaders() {
      return {
        "Blade-Auth": "bearer " + getToken(),
      };
    },
  },
  methods: {
    //上传文件之前的钩子，参数为上传的文件，若返回 false æˆ–者返回 Promise ä¸”被 reject，则停止上传。
    handleBeforeUpload(file) {
      console.log(file)
      if(!file.type){
        this.$message.error('不支持拖拽上传文件夹，请手动选择文件夹上传！')
        return
      }
      const fileList = this.fileAccpet.split(',');
      const fileType = file.name.split(".").pop();
      // fileList.forEach(res => {
      //   if (fileType !== res) {
      //     // this.$message.error(`不支持上传${res}文件，请重新配置！`)
      //     messageList.push(fileType)
      //     return Promise.reject(false);
      //   }
      // });
      if(!fileList.includes(fileType)){
        this.$message.error(`不支持上传${fileType}，请重新配置！`)
        return Promise.reject(false);
      }

      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleFileChange(file) {
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
      // this.$refs.uploadRef.clearFiles()
    },
    //失败
    onError(error) {
      this.pageLoading.close();
    },
    //成功
    onSuccess(response) {
      if (Object.keys(response.data).length === 0) {
        this.$message.success("上传成功！");
        this.dialogVisible = false;
        return;
      }
    },
    //上传单文件
    UploadSingleFile() {
      this.$refs.uploadRef.$children[0].$refs.input.webkitdirectory = false;
    },
    //上传文件夹
    UploadFolder() {
      this.$refs.uploadRef.$children[0].$refs.input.webkitdirectory = true;
    }
  },
};
</script>

<style scoped>

</style>

 Source/ProjectWeb/src/components/PLT-basic-component/richText.vue

@@ -12,9 +12,13 @@
      class="avatar-uploader">
    </el-upload>
    <!-- åŸºäºŽelementUi的上传组件 el-upload end-->
    <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
    <quill-editor ref="customQuillEditor" v-model="value" :options="editorOption" class="editor">
    </quill-editor>
  </div>
  <!--    <template #footer>-->
  <!--      <el-button size="small">确定</el-button>-->
  <!--      <el-button size="small" @click="dialogVisible = false">关闭</el-button>-->
  <!--    </template>-->
</template>

<script>
@@ -36,6 +40,16 @@
  ['clean']                                     // æ¸…除文本格式
];
export default {
  name: 'richText',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String
    }
  },
  data() {
    return {
      headers: {
@@ -65,6 +79,7 @@
      },
    }
  },
  computed: {},
  methods: {
    //上传图片之前async
    beforeEditorUpload(file) {
@@ -126,13 +141,7 @@
    console.log("开始加载")
    // åˆå§‹ç»™ç¼–辑器设置title
  },
  watch: {
    content(newVal, oldVal) {
      //this.$emit('input', newVal);
      console.log(newVal)
      console.log(oldVal)
    }
  },
  watch: {},


}

 Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue

@@ -34,37 +34,16 @@
                     @setReferValue="setReferValue">

        </vciWebRefer>
        <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
        </quill-editor>
      </template>
    </avue-form>
  </div>
</template>

<script>
import vciWebRefer from '@/components/refer/vciWebRefer'

import VciWebRefer from "@/components/refer/vciWebRefer";
import {verifyNull, verifySlash} from "@/util/validate";

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
];
export default {
  name: "dynamic-form",
  components: {VciWebRefer},
@@ -104,39 +83,6 @@
  data() {
    return {
      form: {},
      content: '',
      editorOption: {
        placeholder: '你想说什么？',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: toolbarOptions,  // å·¥å…·æ 
            handlers: {
              'image': function (value) {
                if (value) {
                  document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                } else {
                  this.quill.format('image', false);
                }
              },
              'video': function (value) {
                if (value) {
                  document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                } else {
                  this.quill.format('video', false);
                }
              },
            }
          }
        }
      }
    }
  },
  mounted() {

 Source/ProjectWeb/src/main.js

@@ -26,16 +26,18 @@
import Divider from  '@/components/Divider/index'
// ä¸šåŠ¡ç»„件
import tenantPackage from './views/system/tenantpackage';
//基础绑定表单按钮
// åŸºç¡€ç»‘定表单按钮
import dynamicButton from '@/components/dynamic-components/dynamic-button'
//基础动态弹窗表单组件
// åŸºç¡€åŠ¨æ€å¼¹çª—表单组件
import dynamicTableForm from '@/components/dynamic-components/dynamic-table-form'
//固定表单组件
// å›ºå®šè¡¨å•ç»„件
import dynamicForm from '@/components/dynamic-components/dynamic-form'
//富文本组件
// å¯Œæ–‡æœ¬ç»„件
import richText from '@/components/PLT-basic-component/richText'
// ä¸Šä¼ æ–‡ä»¶ç»„件
import UploadFiles from  '@/components/PLT-basic-component/Upload-files'
// è¡¨å•ä¸Šä¼ æ–‡ä»¶ç»„件
import formUpload from "@/components/PLT-basic-component/formUpload";
// æ³¨å†Œå…¨å±€å®¹å™¨
Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
@@ -48,6 +50,7 @@
Vue.component('dynamicForm', dynamicForm);
Vue.component('richText', richText);
Vue.component('UploadFiles', UploadFiles);
Vue.component('formUpload', formUpload);
Vue.component('Divider', Divider);

import 'quill/dist/quill.core.css'

 Source/ProjectWeb/src/util/func.js

@@ -104,4 +104,77 @@
    }
    return str;
  }

  /**
   * åˆ¤æ–­æ˜¯å¦ä¸ºå¯¹è±¡å¹¶ä¸ä¸ºç©ºå¯¹è±¡
   * @param value
   * @returns {Boolean}
   */
  static isValuableObj(value) {
    return typeof value === 'object' && value !== null && Object.keys(value).length > 0;
  }

  /**
   * èŽ·å–流文件进行文件下
   * @param value
   * @returns {Boolean}
   */
  static downloadFileByBlobHandler(res) {
    if (res.headers['content-disposition']) {
      const fileNames = res.headers['content-disposition'].split(";");
      let characterSet = fileNames[2].split("filename*=")[1];
      let fileName = decodeURI(fileNames[1].split("filename=")[1], characterSet);  // ä¸‹è½½çš„文件名
      let blob = new Blob([res.data], {
        type: res.data.type + ";charset=utf-8",
      });
      const url = URL.createObjectURL(blob); // ç”Ÿæˆä¸‹è½½é“¾æŽ¥
      const link = document.createElement("a");
      link.href = url;
      link.download = fileName; // æŒ‡å®šæ–‡ä»¶åå’Œæ ¼å¼
      document.body.appendChild(link); // æ·»åŠ ä¸‹è½½é“¾æŽ¥åˆ°é¡µé¢
      link.click(); // è§¦å‘下载
      document.body.removeChild(link); //删除下载
      window.URL.revokeObjectURL(url); //释放掉blob对象
    }
  }

  /**
   * èŽ·å–流文件进行文件下
   * @param value
   * @returns {Boolean}
   */
  static downloadFileByBlob(blobData, name) {
    const url = URL.createObjectURL(blobData); // ç”Ÿæˆä¸‹è½½é“¾æŽ¥
    const link = document.createElement("a");
    link.href = url;
    link.download = name; // æŒ‡å®šæ–‡ä»¶åå’Œæ ¼å¼
    document.body.appendChild(link); // æ·»åŠ ä¸‹è½½é“¾æŽ¥åˆ°é¡µé¢
    link.click(); // è§¦å‘下载
    document.body.removeChild(link); //删除下载
  }

  /**
   * å°†æ•°ç»„中的属性拼接成字符串
   * @param {数组} array
   * @param {属性} attr
   * @returns
   */
  static joinedString(array, attr) {
    return array.reduce((accumulator, item) => {
      return accumulator + (accumulator ? ',' : '') + item[attr];
    }, '');
  }

  /**
   * æ¯”对数组中的对象的某个属性是否全部一致
   * @param {数组} array
   * @param {属性} attr
   * @returns ä¸€è‡´è¿”回fasle,不一致返回true
   */
  static isAttrInconsistent(array, attr) {
    return Object.values(array).some((item, index, array) => {
      return item[attr] !== array[0][attr];
    });
  }
}


 Source/ProjectWeb/src/views/custom-ui/test.vue

@@ -1,149 +1,29 @@
<template>
  <div id='quillEditorQiniu'>
    <el-button @click="visible = true">上传文件</el-button>
    <!-- åŸºäºŽelementUi的上传组件 el-upload begin-->
    <el-upload
      :accept="'image'"
      :action="uploadImgUrl"
      :before-upload="beforeEditorUpload"
      :headers="headers"
      :on-error="uploadEditorError"
      :on-success="uploadEditorSuccess"
      :show-file-list="false"
      class="avatar-uploader">
    </el-upload>
    <!-- åŸºäºŽelementUi的上传组件 el-upload end-->
    <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
    </quill-editor>
    <el-button @click="textVisible = true">富文本编辑</el-button>
    <UploadFiles :visible.sync="visible"></UploadFiles>
    <rich-text :visible.sync="textVisible"></rich-text>
  </div>
</template>

<script>
import {getToken} from "@/util/auth";

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],    // åŠ ç²— æ–œä½“ ä¸‹åˆ’线 åˆ é™¤çº¿
  ['blockquote', 'code-block'],                 // å¼•ç”¨  ä»£ç å—
  [{header: 1}, {header: 2}],                   // 1、2 çº§æ ‡é¢˜
  [{list: 'ordered'}, {list: 'bullet'}],        // æœ‰åºã€æ— åºåˆ—表
  [{script: 'sub'}, {script: 'super'}],         // ä¸Šæ ‡/下标
  [{indent: '-1'}, {indent: '+1'}],             // ç¼©è¿›
  [{size: ['small', false, 'large', 'huge']}],  // å­—体大小
  [{header: [1, 2, 3, 4, 5, 6, false]}],        // æ ‡é¢˜
  [{color: []}, {background: []}],              // å­—体颜色 å­—体背景颜色
  [{font: []}],                                 // å­—体种类
  [{align: []}],                                // å¯¹é½æ–¹å¼
  ['link', 'image'],                            // é“¾æŽ¥ å›¾ç‰‡
  ['clean']                                     // æ¸…除文本格式
];
export default {
  data() {
    return {
      visible: false,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: "/v1/admin/common/upload",
      uploadUrlPath: "没有文件上传",
      quillUpdateImg: false,
      content: '',    //最终保存的内容
      editorOption: {
        theme: 'snow',
        placeholder: '请输入内容',
        modules: {
          toolbar: {
            container: toolbarOptions,  // å·¥å…·æ 
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                } else {
                  this.quill.format('image', false);
                }
              },
              link: function (value) {
                if (value) {
                  const href = prompt('请输入链接地址：');
                  this.quill.format('link', href)
                } else {
                  this.quill.format('link', false)
                }
              },
            }
          }
        }
      },
      textVisible:false,
    }
  },
  methods: {
    //上传图片之前async
    beforeEditorUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG，PNG, GIF æ ¼å¼!')
      } else {
        //显示上传动画
        this.quillUpdateImg = true;
      }
    },
    // ä¸Šä¼ å›¾ç‰‡æˆåŠŸ
    uploadEditorSuccess(res, file) {
      console.log("上传成功")
      // this.$emit('upload',res, file)
      console.log(res, file);
      //拼接出上传的图片在服务器的完整地址
      let imgUrl = res.data.url;
      let type = imgUrl.substring(imgUrl.lastIndexOf(".") + 1);
      console.log(type);
      // èŽ·å–富文本组件实例
      let quill = this.$refs.customQuillEditor.quill;
      // èŽ·å–光标所在位置
      let length = quill.getSelection().index;
      // æ’入图片||视频  res.info为服务器返回的图片地址
      if (type == 'mp4' || type == 'MP4') {
        quill.insertEmbed(length, 'video', imgUrl)
      } else {
        quill.insertEmbed(length, 'image', imgUrl)
      }
      // è°ƒæ•´å…‰æ ‡åˆ°æœ€åŽ
      quill.setSelection(length + 1)
      //取消上传动画
      this.quillUpdateImg = false;
    },
    // ä¸Šä¼ (文件)图片失败
    uploadEditorError(res, file) {
      console.log(res);
      console.log(file);
      //页面提示
      this.$message.error('上传图片失败')
      //取消上传动画
      this.quillUpdateImg = false;
    },
    //上传组件返回的结果
    uploadResult: function (res) {
      this.uploadUrlPath = res;
    },
    openContent: function () {
      console.log(this.content)
    },

  },
  methods: {},
  created() {

  },
  //只执行一次，加载执行

  mounted() {
    console.log("开始加载")
    // åˆå§‹ç»™ç¼–辑器设置title
  },
  watch: {
    content(newVal, oldVal) {
      //this.$emit('input', newVal);
      console.log(newVal)
      console.log(oldVal)
    }
  },
  watch: {},


}

 Source/ProjectWeb/src/views/custom-ui/test2.vue

@@ -1,12 +1,556 @@
<template>
  <basic-container>
    æµ‹è¯•è‡ªå®šä¹‰ç»„件展示222222222
    <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
      <avue-form v-model="form" :option="option">
        <template v-for="item in slotData" :slot="item.prop + 'Label'">
        <span>
          <span>{{ item.label }} </span>
          <el-tooltip
            v-if="item.keyAttr"
            class="item"
            content="该属性为关键属性"
            effect="dark"
            placement="top-start"
          >
            <i class="el-icon-star-on" style="font-size: 17px !important; color: red;vertical-align: baseline;"></i>
          </el-tooltip>
        </span>
        </template>
        <template slot="menuForm">
          <dynamic-button :butttonList="componentVO.buttons" type="form" @buttonClick="buttonClick"></dynamic-button>
        </template>

        <template v-for="item in slotData" :slot="item.prop + ''">
          <!--   å‚ç…§       -->
          <vciWebRefer v-if="item.type == 'refer'"
                       :key="item.prop"
                       :ref="'referFormRef'+item.prop"
                       :data-key="item.prop"
                       :disabled="item.disabled || false"
                       :display="item.display || true"
                       :referConfig="item.referConfig || {}"
                       :reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
                       :text="item.referConfig.showProp"
                       :value="item.prop || item.value"
                       referType="master"
                       @setReferValue="setReferValue">

          </vciWebRefer>
          <!--   å¯Œæ–‡æœ¬æŽ§ä»¶       -->
          <rich-text v-if="item.type === 'richText'" :value="form[subitemName]" @input="form[subitemName] = $event"></rich-text>
          <!--   è¡¨å•ä¸Šä¼ æ–‡ä»¶ç»„件       -->
          <form-upload v-if="item.type === 'upload'"></form-upload>
        </template>
      </avue-form>
    </div>
  </basic-container>
</template>

<script>
import VciWebRefer from "@/components/refer/vciWebRefer";
import {verifyNull, verifySlash} from "@/util/validate";

export default {
  name: "test2"
  name: "test2",
  components: {VciWebRefer},
  props: {
    componentVO: {
      type: Object,
      default: {}
    },
    inDialog: {
      type: Boolean,
      default: false
    },
    areasName: {
      type: String,
      default: ''
    },
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
    paramVOS: {
      type: Object,
      default: {}
    },
    isShow: {
      //所在区域是否已显示，针对tab和collapse
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      formDefine: {
        "formDefineVO": {
          "btmType": "material",
          "columnOneRow": 3,
          "freeMarkerEls": [],
          "id": "materialform",
          "items": [
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "id",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": true,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "材料代码",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "name",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": true,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "材料名称",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "specification",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "规格及标准",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "materialtrademark",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "材料牌号及标准",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "technicalrequirement",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "技术要求",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "classofexpenditure",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": {
                showProp: "userIdName",
                type: 'user',
                extraParams: {
                  aaa: '111'
                },//查询条件，可选
                paramForFormKey: 'formDeptId', //使用表单上的数据作为查询条件参数,没有时使用useFormKey
                formValuesKey: 'ruleForm',//页面上的表单数据对象名称，默认值‘form’
                useFormKey: 'deptId',//需要从formValues中获取的表单字段,根据部门树参照选中数据动态查询用户
                isMuti: true,//是否多选，可选
                width: '1000px',
                referBusCode: "user",
                mapProps: {
                  'personClassifyText': 'personClassify'
                },
                defalutValue: '1', //参照默认值
                defalutText: '测试默认值' //参照默认显示值
              },
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "消耗分类",
              "tooltips": null,
              "type": "refer",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "measurementunit",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "计量单位",
              "tooltips": null,
              "type": "upload",
              "unique": false,
              "verify": "",
              "uploadList":['.png','.xls','.']
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "description",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "备注",
              "tooltips": null,
              "type": "richText",
              "unique": false,
              "verify": ""
            }
          ],
          "linkTypeFlag": false,
          "oid": "ED51077B-253F-2AB9-A0E6-BA289052B03C",
          "queryTemplateName": ""
        },
        "id": null,
        "lastModifier": null,
        "lastModifyTime": null,
        "lastR": null,
        "lastV": null,
        "lcStatus": null,
        "lcStatusText": null,
        "lctid": null,
        "name": "表单显示",
        "nameOid": null,
        "oid": "88BF207E-6F02-8E76-5086-5061DBD35A98",
        "orderNum": 1,
        "owner": null,
        "pkLayout": "0D6C19B4-4C8B-F540-7441-2ABAFE606031",
        "revisionOid": null,
        "revisionRule": null,
        "revisionSeq": 0,
        "revisionValue": null,
        "secretGrade": null,
        "secretGradeText": null,
        "tableDefineVO": null,
        "treeDefineVO": null,
        "treeTableDefineVO": null,
        "ts": null,
        "uiComponentType": "form",
        "uiComponentTypeText": "表单",
        "uiParseClass": "",
        "versionRule": null,
        "versionSeq": 0,
        "versionValue": null
      },
      form: {
      },
      subitemName:''
    }
  },
  computed: {
    option() {
      return {
        submitBtn: false,
        emptyBtn: false,
        height: 300,
        column: this.getColumnData()
      }
    },
    slotData() {
      return this.getColumnData()
    }
  },
  watch: {
    slotData: {
      handler(newV) {
        this.getDictList(newV)
      },
      immediate: true,
    },
    form: {
      handler(val) {
        if (val) {
          if (Array.isArray(val)) { // æ£€æŸ¥ val æ˜¯å¦ä¸ºæ•°ç»„
            for (let code of val) {
              if (
                code.type == "refer" &&
                code.referConfig &&
                code.referConfig.useFormKey
              ) {
                code.referConfig.formValues = val;
                // code.referConfigTemp.options = code.referConfig;
              }
            }
          } else if (typeof val === 'object') { // æ£€æŸ¥ val æ˜¯å¦ä¸ºå¯¹è±¡
            // è¿­ä»£å¯¹è±¡çš„逻辑
          }
          this.$emit("input", val);
        }
      },
      deep: true,
      immediate: true,
    },
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  methods: {
    //转化数据
    formColumn(formList) {
      return formList.map(item => {
        const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
        if(item.type === 'richText'){
          this.subitemName = item.field;
        }else if(item.type === 'upload'){

        }


        return {
          label: item.text,
          prop: item.field,
          type: typeValue,
          labelWidth: item.text.length >= 6 ? 115 : 90,
          value: item.defaultValue,
          dicData: item.type === 'combox' ? item.dicData : item.dicUrl,
          readonly: item.readOnly,
          disabled: item.disabled,
          display: !item.hidden,
          labelSuffix: item.suffix,
          suffixIcon: item.prefix,
          placeholder: item.placeholder,
          clearable: item.clearable,
          tip: item.tooltips,
          keyAttr: item.keyAttr,
          referConfig: item.referConfig,
          rules: [{
            required: item.required,
            message: `请输入${item.text}!`,
            trigger: "blur"
          }]
        };
      });
    },

    //数据判空
    getColumnData() {
      if (this.formDefine && this.formDefine.formDefineVO && this.formDefine.formDefineVO.items && this.formDefine.formDefineVO.items.length > 0) {
        return this.formColumn(this.formDefine.formDefineVO.items)
      } else {
        return null;
      }
    },

    buttonClick(item) {
      console.log(item.id)
    },
    async getDictList(val) {
      for (let code of val) {
        if (!verifyNull(code.dictData) && code.type == "select") {
          if (
            verifySlash(code.dictCode) &&
            Object.prototype.hasOwnProperty.call(code, "dictCode")
          ) {
            const res = await getlistByCode(code.dictCode);
            if (res.success) {
              const dic = res.data;
              code.dictData = dic.map((d) => {
                return {
                  label: d.name,
                  key: d.code,
                  value: d.id,
                };
              });
            }
          } else {
            this.getDicts(code.dictCode)
              .then((res) => {
                if (res.success) {
                  const dic = res.obj.datas;
                  code.dictData = dic.map((d) => {
                    return {
                      label: d.name,
                      key: d.code,
                      value: d.code,
                    };
                  });
                }
              })
              .catch(() => {
                this.$message.error(` æ•°æ®å­—å…¸${code.dictCode}错误`);
              });
          }
        }
        if (code.type == "refer") {
          if (code.referConfig && code.referConfig.useFormKey) {
            if (verifyNull(code.referConfig.formValuesKey)) {
              code.referConfig.formValuesKey = "form";
            }
            code.referConfig.formValues = this[code.referConfig.formValuesKey];
          }
          code.referConfigTemp = {
            title: code.label,
            showProp:
              code.showProp || code.referConfig.showProp || code.prop + "Name",
            prop: code.prop,
            propMap: code.propMap || {},
            placeholder: code.placeholder
              ? code.placeholder
              : ` è¯·é€‰æ‹©` + code.label,
            options: code.referConfig,
          };
        }
      }
      this.formTemplateData = val;
    },
    setReferValue(data) {
      if (data && data.prop) {
        this.form[data.prop] = data.value || "";
        this.form[data.showProp] = data.text || "";
        if (data.propMap) {
          //说明需要映射
          for (let key in data.propMap) {
            let mapFields = data.propMap[key].split(",");
            let value = [];
            data.rawData.forEach((_item) => {
              var temp;
              if (!_item.extendData) {
                _item.extendData = {};
              }
              if (mapFields.length == 1) {
                var mapField = mapFields[0];
                temp = _item[mapField] || _item["extendData"][mapField];
              } else {
                //有多个
                var mutiTemp = [];
                mapFields.forEach((_itemField) => {
                  mutiTemp.push(
                    _item[_itemField] || _item["extendData"][_itemField]
                  );
                });
                temp = mutiTemp.join(" ");
              }
              if (temp != null && temp != "") {
                value.push(temp);
              }
            });
            this.form[key] = value.join(",");
          }
        }
      }
    },
  }
}
</script>