From 89504036742a64ac44c821b9a069220faf150915 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期一, 15 四月 2024 10:32:52 +0800
Subject: [PATCH] 文件上传整合代码
---
Source/ProjectWeb/src/components/PLT-basic-component/Upload-files.vue | 67 +-
Source/ProjectWeb/src/components/PLT-basic-component/formUpload.vue | 113 ++++++
Source/ProjectWeb/src/util/func.js | 73 ++++
Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue | 56 ---
Source/ProjectWeb/src/main.js | 11
Source/ProjectWeb/src/components/PLT-basic-component/richText.vue | 25
Source/ProjectWeb/src/views/custom-ui/test2.vue | 548 ++++++++++++++++++++++++++++++
Source/ProjectWeb/src/views/custom-ui/test.vue | 132 -------
8 files changed, 798 insertions(+), 227 deletions(-)
diff --git a/Source/ProjectWeb/src/components/PLT-basic-component/Upload-files.vue b/Source/ProjectWeb/src/components/PLT-basic-component/Upload-files.vue
index 9e19065..35b1b6d 100644
--- a/Source/ProjectWeb/src/components/PLT-basic-component/Upload-files.vue
+++ b/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;
diff --git a/Source/ProjectWeb/src/components/PLT-basic-component/formUpload.vue b/Source/ProjectWeb/src/components/PLT-basic-component/formUpload.vue
new file mode 100644
index 0000000..8783f13
--- /dev/null
+++ b/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>
+ <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>
diff --git a/Source/ProjectWeb/src/components/PLT-basic-component/richText.vue b/Source/ProjectWeb/src/components/PLT-basic-component/richText.vue
index 662bc32..36cddd7 100644
--- a/Source/ProjectWeb/src/components/PLT-basic-component/richText.vue
+++ b/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: {},
}
diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue
index 3104d06..be1d099 100644
--- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue
+++ b/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() {
diff --git a/Source/ProjectWeb/src/main.js b/Source/ProjectWeb/src/main.js
index d13aa2e..2569d83 100644
--- a/Source/ProjectWeb/src/main.js
+++ b/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'
diff --git a/Source/ProjectWeb/src/util/func.js b/Source/ProjectWeb/src/util/func.js
index 9484984..9c9f00d 100644
--- a/Source/ProjectWeb/src/util/func.js
+++ b/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); //閲婃斁鎺塨lob瀵硅薄
+ }
+ }
+
+ /**
+ * 鑾峰彇娴佹枃浠惰繘琛屾枃浠朵笅
+ * @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 涓�鑷磋繑鍥瀎asle,涓嶄竴鑷磋繑鍥瀟rue
+ */
+ static isAttrInconsistent(array, attr) {
+ return Object.values(array).some((item, index, array) => {
+ return item[attr] !== array[0][attr];
+ });
+ }
}
+
diff --git a/Source/ProjectWeb/src/views/custom-ui/test.vue b/Source/ProjectWeb/src/views/custom-ui/test.vue
index 46ca215..aae9e1e 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test.vue
+++ b/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锛孭NG, 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: {},
}
diff --git a/Source/ProjectWeb/src/views/custom-ui/test2.vue b/Source/ProjectWeb/src/views/custom-ui/test2.vue
index e73b6cf..cbd9fae 100644
--- a/Source/ProjectWeb/src/views/custom-ui/test2.vue
+++ b/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: {
+ //鎵�鍦ㄥ尯鍩熸槸鍚﹀凡鏄剧ず锛岄拡瀵箃ab鍜宑ollapse
+ 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', //浣跨敤琛ㄥ崟涓婄殑鏁版嵁浣滀负鏌ヨ鏉′欢鍙傛暟,娌℃湁鏃朵娇鐢╱seFormKey
+ formValuesKey: 'ruleForm',//椤甸潰涓婄殑琛ㄥ崟鏁版嵁瀵硅薄鍚嶇О锛岄粯璁ゅ�尖�榝orm鈥�
+ 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>
--
Gitblit v1.9.3