Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 fd20017c 编写于 作者: tony001's avatar tony001
浏览文件
操作

Merge branch 'dev'

上级 837ff8c0 e6a44e4c
隐藏空白字符变更
内嵌 并排
正在显示 包含 1402 行增加 和 1185 行删除
package.json 已删除 100644 → 0
浏览文件 @ 837ff8c0
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service serve --mode test",
"dev-serve": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service serve --mode development",
"build": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build",
"dev-build": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build --mode development",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@fullcalendar/vue": "^4.4.0",
"vuedraggable": "^2.23.2",
"async-validator": "^3.3.0",
"@popperjs/core": "^2.4.3",
"axios": "^0.19.1",
"core-js": "^3.4.4",
"echarts": "^4.6.0",
"element-ui": "^2.13.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"ibiz-gantt-elastic": "^1.0.17",
"ibiz-vue-lib": "^0.1.13",
"interactjs": "^1.9.4",
"moment": "^2.24.0",
"path-to-regexp": "^6.1.0",
"qs": "^6.9.1",
"rxjs": "^6.5.4",
"tinymce": "4.8.5",
"view-design": "4.2.0",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-grid-layout": "^2.3.7",
"vue-i18n": "^8.15.3",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.3",
"vuex": "^3.1.2",
"xlsx": "^0.15.6"
},
"devDependencies": {
"@types/echarts": "^4.4.3",
"@types/jest": "^24.0.19",
"@types/mockjs": "^1.0.2",
"@types/qs": "^6.9.0",
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-e2e-cypress": "^4.1.0",
"@vue/cli-plugin-router": "^4.1.0",
"@vue/cli-plugin-typescript": "^4.1.0",
"@vue/cli-plugin-unit-jest": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/test-utils": "1.0.0-beta.29",
"axios-mock-adapter": "^1.17.0",
"compression-webpack-plugin": "^4.0.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"mockjs": "^1.1.0",
"script-loader": "^0.7.2",
"typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10"
}
}
src/components/app-picker/app-picker.vue
浏览文件 @ fd20017c
...@@ -65,7 +65,7 @@ export default class AppPicker extends Vue { ...@@ -65,7 +65,7 @@ export default class AppPicker extends Vue {
* 视图上下文 * 视图上下文
* *
* @type {*} * @type {*}
* @memberof AppFormDRUIPart * @memberof AppPicker
*/ */
@Prop() public context!: any; @Prop() public context!: any;
...@@ -73,7 +73,7 @@ export default class AppPicker extends Vue { ...@@ -73,7 +73,7 @@ export default class AppPicker extends Vue {
* 视图参数 * 视图参数
* *
* @type {*} * @type {*}
* @memberof AppFormDRUIPart * @memberof AppPicker
*/ */
@Prop() public viewparams!: any; @Prop() public viewparams!: any;
...@@ -81,15 +81,23 @@ export default class AppPicker extends Vue { ...@@ -81,15 +81,23 @@ export default class AppPicker extends Vue {
* AC参数 * AC参数
* *
* @type {*} * @type {*}
* @memberof AppFormDRUIPart * @memberof AppPicker
*/ */
@Prop({default: () => {}}) public acParams?: any; @Prop({default: () => {}}) public acParams?: any;
/**
* 外键值附加数据
*
* @type {*}
* @memberof AppPicker
*/
@Prop() public pickUpData?: string;
/** /**
* 表单服务 * 表单服务
* *
* @type {*} * @type {*}
* @memberof AppFormDRUIPart * @memberof AppPicker
*/ */
@Prop() public service?: any; @Prop() public service?: any;
...@@ -97,7 +105,7 @@ export default class AppPicker extends Vue { ...@@ -97,7 +105,7 @@ export default class AppPicker extends Vue {
* 应用实体主信息属性名称 * 应用实体主信息属性名称
* *
* @type {string} * @type {string}
* @memberof AppAutocomplete * @memberof AppPicker
*/ */
@Prop({default: 'srfmajortext'}) public deMajorField!: string; @Prop({default: 'srfmajortext'}) public deMajorField!: string;
...@@ -105,7 +113,7 @@ export default class AppPicker extends Vue { ...@@ -105,7 +113,7 @@ export default class AppPicker extends Vue {
* 应用实体主键属性名称 * 应用实体主键属性名称
* *
* @type {string} * @type {string}
* @memberof AppAutocomplete * @memberof AppPicker
*/ */
@Prop({default: 'srfkey'}) public deKeyField!: string; @Prop({default: 'srfkey'}) public deKeyField!: string;
...@@ -240,7 +248,7 @@ export default class AppPicker extends Vue { ...@@ -240,7 +248,7 @@ export default class AppPicker extends Vue {
* 输入状态 * 输入状态
* *
* @type {boolean} * @type {boolean}
* @memberof AppAutocomplete * @memberof AppPicker
*/ */
public inputState: boolean = false; public inputState: boolean = false;
...@@ -397,6 +405,7 @@ export default class AppPicker extends Vue { ...@@ -397,6 +405,7 @@ export default class AppPicker extends Vue {
if (this.name) { if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField] }); this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField] });
} }
this.fillPickUpData(item);
} }
/** /**
...@@ -430,6 +439,7 @@ export default class AppPicker extends Vue { ...@@ -430,6 +439,7 @@ export default class AppPicker extends Vue {
if (this.name) { if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: '' }); this.$emit('formitemvaluechange', { name: this.name, value: '' });
} }
this.fillPickUpData();
this.$forceUpdate(); this.$forceUpdate();
} }
...@@ -672,6 +682,7 @@ export default class AppPicker extends Vue { ...@@ -672,6 +682,7 @@ export default class AppPicker extends Vue {
if (this.name) { if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField]?item[this.deMajorField]:item["srfmajortext"] }); this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField]?item[this.deMajorField]:item["srfmajortext"] });
} }
this.fillPickUpData(item);
} }
} }
...@@ -752,7 +763,7 @@ export default class AppPicker extends Vue { ...@@ -752,7 +763,7 @@ export default class AppPicker extends Vue {
/** /**
* 输入过程中 * 输入过程中
* *
* @memberof AppAutocomplete * @memberof AppPicker
*/ */
public onInput($event: any) { public onInput($event: any) {
if (Object.is($event, this.value)) { if (Object.is($event, this.value)) {
...@@ -783,6 +794,34 @@ export default class AppPicker extends Vue { ...@@ -783,6 +794,34 @@ export default class AppPicker extends Vue {
appPicker.blur(); appPicker.blur();
} }
} }
/**
* 填充外键值附加数据
*
* @param {item} 数据集
* @memberof AppPicker
*/
public fillPickUpData(item?:any){
if(this.pickUpData){
let pickUpDataArray:Array<any> = this.pickUpData.split(";")
if(pickUpDataArray && pickUpDataArray.length >0){
for(let i=0;i<pickUpDataArray.length;i++){
if(item){
this.$emit("formitemvaluechange", {
name: pickUpDataArray[i],
value: item[pickUpDataArray[i]],
});
}else{
this.$emit("formitemvaluechange", {
name: pickUpDataArray[i],
value: "",
});
}
}
}
}
}
} }
......
src/components/avue-custom-form/avue-custom-form.vue
浏览文件 @ fd20017c
...@@ -20,10 +20,10 @@ export default class AvueCustomForm extends Vue { ...@@ -20,10 +20,10 @@ export default class AvueCustomForm extends Vue {
/** /**
* 编辑器参数传入组件配置 * 编辑器参数传入组件配置
* *
* @type {any} * @type {*}
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
@Prop() public options?: any; public options: any;
/** /**
* 是否需要转换为string类型 * 是否需要转换为string类型
...@@ -47,7 +47,7 @@ export default class AvueCustomForm extends Vue { ...@@ -47,7 +47,7 @@ export default class AvueCustomForm extends Vue {
* @type {any} * @type {any}
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
@Model('change') public value: any; @Model("change") public value: any;
/** /**
* 是否将表单数据通过组件配置带入组件中 * 是否将表单数据通过组件配置带入组件中
...@@ -57,13 +57,22 @@ export default class AvueCustomForm extends Vue { ...@@ -57,13 +57,22 @@ export default class AvueCustomForm extends Vue {
*/ */
@Prop() public isFormData?: boolean; @Prop() public isFormData?: boolean;
/**
* 是否为子表单
*
* @type {boolean}
* @memberof AvueCustomForm
*/
@Prop() public isSubForm?: boolean;
/** /**
* 表单数据 * 表单数据
* *
* @type {any} * @type {*}
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
@Prop() public formData: any; @Prop()
public formData?: any;
/** /**
* 表单状态 * 表单状态
...@@ -81,10 +90,12 @@ export default class AvueCustomForm extends Vue { ...@@ -81,10 +90,12 @@ export default class AvueCustomForm extends Vue {
*/ */
get formVal() { get formVal() {
let obj: any = {}; let obj: any = {};
if (this.value) { if (this.value) {
if (this.isParseString) obj = JSON.parse(this.value); if (this.isParseString) obj = JSON.parse(this.value);
else obj = this.value; else obj = this.value;
} if (this.isSubForm && obj instanceof Array)
obj = this.loadSubFormData(obj);
}
return obj; return obj;
} }
...@@ -110,7 +121,7 @@ export default class AvueCustomForm extends Vue { ...@@ -110,7 +121,7 @@ export default class AvueCustomForm extends Vue {
/** /**
* 当前组件配置设置属性 * 当前组件配置设置属性
* *
* @type {any} * @type {*}
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
public formOption: any = null; public formOption: any = null;
...@@ -118,7 +129,7 @@ export default class AvueCustomForm extends Vue { ...@@ -118,7 +129,7 @@ export default class AvueCustomForm extends Vue {
/** /**
* avue-form默认配置 * avue-form默认配置
* *
* @type {any} * @type {*}
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
public defaultOptions: any = { public defaultOptions: any = {
...@@ -185,22 +196,26 @@ export default class AvueCustomForm extends Vue { ...@@ -185,22 +196,26 @@ export default class AvueCustomForm extends Vue {
* *
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
public load() { public async load() {
let that: any = this; let that: any = this;
if (!this.options && this.options == null) { if (!this.options && this.options == null) {
if (this.url && this.options == null) { if (this.url && this.options == null) {
const get: Promise<any> = this.$http.get(this.url); const get: Promise<any> = this.$http.get(this.url);
get.then((response: any) => { await get.then((response: any) => {
if (response && response.data) { if (response && response.data) {
that.formOption = response.data; let options: any = response.data;
if (this.isFormData) that.getFormData(); this.transitionDicUrlCondition(options);
that.formOption = options;
if (that.isFormData) that.getFormData();
} }
}); });
} else { } else {
this.transitionDicUrlCondition(this.defaultOptions);
this.formOption = this.defaultOptions; this.formOption = this.defaultOptions;
if (this.isFormData) that.getFormData(); if (this.isFormData) that.getFormData();
} }
} else { } else {
this.transitionDicUrlCondition(this.options);
this.formOption = this.options; this.formOption = this.options;
if (this.isFormData) that.getFormData(); if (this.isFormData) that.getFormData();
} }
...@@ -239,19 +254,78 @@ export default class AvueCustomForm extends Vue { ...@@ -239,19 +254,78 @@ export default class AvueCustomForm extends Vue {
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
public setValue(value: any) { public setValue(value: any) {
if (this.isSubForm) value = this.getSubFormData(value);
if (this.isParseString) this.$emit("change", JSON.stringify(value)); if (this.isParseString) this.$emit("change", JSON.stringify(value));
else this.$emit("change", value); else this.$emit("change", value);
} }
/**
* 提取第一个属性值
*
* @memberof AvueCustomForm
* @return {Array<any>}
*/
public getSubFormData(value: any): Array<any> {
let arr: Array<any> = [];
for (let val in value) {
arr = value[val];
break;
}
return arr;
}
/**
* 加载子表单值
*
* @memberof AvueCustomForm
* @return {*}
*/
public loadSubFormData(arr: Array<any>): any {
let value: any = {};
value[this.formOption.column[0].prop] = arr;
return value;
}
/**
* 配置的下拉列表转换符号支持动态配置
*
* @memberof AvueCustomForm
* @param {*}
*/
public transitionDicUrlCondition(options: any) {
let that: any = this;
let recursive: any = function (obj: any) {
if (obj.column && obj.column.length > 0) {
obj.column.forEach((col: any) => {
if (col.dicUrl && col.dicUrl.indexOf("$") > 0) {
let g = /\${[^+]+}/;
let dicGroup = col.dicUrl.match(g);
dicGroup.forEach((dic: any) => {
col.dicUrl = col.dicUrl.replace(
dic,
that.formData[dic.substring(2, dic.length - 1)]
);
});
}
if (col.children) recursive(col.children);
if (col.group) recursive(col.group);
});
}
if (obj.children) recursive(obj.children);
if (obj.group) recursive(obj.group);
};
recursive(options);
}
/** /**
* 销毁组件(vue生命周期) * 销毁组件(vue生命周期)
* *
* @type {Subject<any>} * @type {Subject<any>}
* @memberof AvueCustomForm * @memberof AvueCustomForm
*/ */
public destroy(){ public destroy() {
if(this.formStateEvent){ if (this.formStateEvent) {
this.formStateEvent.unsubscribe(); this.formStateEvent.unsubscribe();
} }
} }
} }
......
src/components/disk-file-upload/disk-file-upload.vue
浏览文件 @ fd20017c
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
:headers="myHeaders" :headers="myHeaders"
:file-list="uploadFileList" :file-list="uploadFileList"
:show-file-list="false" :show-file-list="false"
:limit="limit"
:http-request="customUploadFile"> :http-request="customUploadFile">
<div> <div>
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
...@@ -20,7 +19,6 @@ ...@@ -20,7 +19,6 @@
<span>{{$t('components.diskFileUpload.fileDrag')}}</span> <span>{{$t('components.diskFileUpload.fileDrag')}}</span>
<span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span> <span style="color:#409EFF;">{{$t('components.diskFileUpload.clickUpload')}}</span>
</div> </div>
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div>
</div> </div>
</el-upload> </el-upload>
</el-col> </el-col>
...@@ -34,10 +32,10 @@ ...@@ -34,10 +32,10 @@
:headers="myHeaders" :headers="myHeaders"
:file-list="uploadFileList" :file-list="uploadFileList"
:show-file-list="false" :show-file-list="false"
:limit="limit"
:http-request="customUploadFile"> :http-request="customUploadFile">
<el-button type="primary" size="small" icon="el-icon-upload">{{$t('components.diskFileUpload.clickUpload')}}</el-button> <el-button type="primary" size="small" icon="el-icon-upload">
<div slot="tip" class="el-upload__tip">{{uploadTip}}</div> {{$t('components.diskFileUpload.clickUpload')}}
</el-button>
</el-upload> </el-upload>
</el-col> </el-col>
<!--文件操作--> <!--文件操作-->
...@@ -47,8 +45,11 @@ ...@@ -47,8 +45,11 @@
<span>{{item.name}}</span> <span>{{item.name}}</span>
</div> </div>
<div class="fileMain"> <div class="fileMain">
<el-link type="success" icon="el-icon-download" @click="onDownload(item)">{{$t('components.diskFileUpload.load')}}</el-link> <el-link type="success" icon="el-icon-download" @click="onDownload(item)">
<el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">{{$t('components.diskFileUpload.preview')}} {{$t('components.diskFileUpload.load')}}
</el-link>
<el-link type="warning" icon="el-icon-view" v-show="showPreview" @click="onPreview(item)">
{{$t('components.diskFileUpload.preview')}}
</el-link> </el-link>
<el-link type="primary" icon="el-icon-edit" <el-link type="primary" icon="el-icon-edit"
v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))" v-show="showEdit && (item.name.match(/^.+\.(doc|DOC|docx|DOCX|wps|WPS|xls|XLS|xlsx|XLSX|ppt|PPT|et|ET)$/))"
...@@ -58,287 +59,314 @@ ...@@ -58,287 +59,314 @@
v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))" v-show="showOcrview && (item.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP|pdf|PDF)$/))"
@click="onOcr(item)">OCR @click="onOcr(item)">OCR
</el-link> </el-link>
<el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">{{$t('components.diskFileUpload.delete')}}</el-link> <el-link type="danger" icon="el-icon-delete" @click="onRemove(item,index)">
{{$t('components.diskFileUpload.delete')}}
</el-link>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<!-- 自定义弹框 -->
<div class="dialogDiv">
<el-dialog
:title="dialogTitle"
center
width="70%"
top="5vh"
:visible="showDialog"
:close-on-click-modal="true"
:show-close="true"
:before-close="dialogClose"
:modal-append-to-body="false">
<div style="height: 100%;">
<iframe id="fileIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe>
</div>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui'; import {Button, Row, Col, Link, Icon, Upload, Message, MessageBox} from 'element-ui';
import Axios from 'axios'; import Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs'; import {Subject, Unsubscribable} from 'rxjs';
@Component({}) @Component({})
export default class DiskFileUpload extends Vue { export default class DiskFileUpload extends Vue {
/** /**
* 当前表单对象 * 当前表单对象
* *
* @type {*} * @type {*}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public data!: any; @Prop() public data!: any;
/** /**
* 当前属性名 * 当前属性名
* *
* @type {string} * @type {string}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public formItemName!: string; @Prop() public formItemName!: string;
/** /**
* 当前属性值 * 当前属性值
* *
* @type {string} * @type {string}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public value!: string; @Prop() public value!: string;
/** /**
* 当前表单状态 * 当前表单状态
* *
* @type {*} * @type {*}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public formState!: any; @Prop() public formState!: any;
/** /**
* 默认为当前实体名称，有指定则按表单参数 * 默认为当前实体名称，有指定则按表单参数
* *
* @type {string} * @type {string}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public folder!: string; @Prop() public folder!: string;
/** /**
* 默认为当前实体主键id，有指定则按表单参数 * 默认为当前实体主键id，有指定则按表单参数
* *
* @type {string} * @type {string}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public ownerid!: string; @Prop() public ownerid!: string;
/** /**
* 默认为当前属性名，有指定则按表单参数 * 默认为当前属性名，有指定则按表单参数
* *
* @type {string} * @type {string}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop() public ownertype!: string; @Prop() public ownertype!: string;
/** /**
* 持久化 * 持久化
* *
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public persistence?: boolean; @Prop({default: false}) public persistence?: boolean;
/** /**
* 是否显示拖拽区域 * 是否显示拖拽区域
* *
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showDrag?: boolean; @Prop({default: false}) public showDrag?: boolean;
/** /**
* 是否显示预览按钮 * 是否显示预览按钮
* *
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showPreview?: boolean; @Prop({default: false}) public showPreview?: boolean;
/** /**
* 是否显示在线编辑按钮 * 是否显示在线编辑按钮
* *
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showEdit?: boolean; @Prop({default: false}) public showEdit?: boolean;
/** /**
* 是否显示OCR按钮 * 是否显示OCR按钮
* *
* @type {boolean} * @type {boolean}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: false}) public showOcrview?: boolean; @Prop({default: false}) public showOcrview?: boolean;
/** /**
* 单文件大小 * 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
* *
* @type {number} * @type {string}
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
@Prop({default: 1}) public size!: number; public srfuf: string = '0';
/**
* 文件上传个数 /**
* * 文件列表
* @type {number} *
* @memberof DiskFileUpload * @type {Array<any>}
*/ * @memberof DiskFileUpload
@Prop({default: 5}) public limit!: number; */
public uploadFileList: Array<any> = [];
/**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存） /**
* * 当前登陆人的token
* @type {string} *
* @memberof DiskFileUpload * @type {string}
*/ * @memberof DiskFileUpload
public srfuf: string = '0'; */
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传提示语 /**
* * 上传文件请求头
* @type {string} *
* @memberof DiskFileUpload * @type {*}
*/ * @memberof DiskFileUpload
get uploadTip(): string { */
return this.$t('components.diskFileUpload.clues')+this.size.toString()+"M，"+this.$t('components.diskFileUpload.clues1')+this.limit; public myHeaders: any = {Authorization: this.token};
}
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 自定义弹框标题
*
* @type {*}
* @memberof DiskFileUpload
*/
public dialogTitle: any = '';
/**
* 是否显示自定义弹框
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public showDialog: boolean = false;
/**
* 嵌入自定义弹框中iframe的url
*
* @type {*}
* @memberof DiskFileUpload
*/
public iframeUrl: any = '';
/**
* 关闭自定义弹框
*
* @memberof DiskFileUpload
*/
public dialogClose() {
this.dialogTitle = '';
this.showDialog = false;
this.iframeUrl = '';
let iframe: any = document.getElementById("fileIframe");
iframe.parentNode.removeChild("fileIframe");
}
/** /**
* 文件列表 * 拼接上传路径
* *
* @type {Array<any>} * @memberof DiskFileUpload
* @memberof DiskFileUpload */
*/ public getAction() {
public uploadFileList: Array<any> = []; return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
}
/**
* 当前登陆人的token
*
* @type {string}
* @memberof DiskFileUpload
*/
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 上传文件请求头
*
* @type {*}
* @memberof DiskFileUpload
*/
public myHeaders: any = {Authorization: this.token};
/**
* 表单状态事件
*
* @type {*}
* @memberof DiskFileUpload
*/
public formStateEvent: any | Unsubscribable | undefined;
/**
* 批量更新标识，false为不更新，true才可以更新
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isUpdateBatch: boolean = true;
/**
* 新建状态标识,true为新建，false为编辑
*
* @type {boolean}
* @memberof DiskFileUpload
*/
public isCreate: boolean = true;
/**
* 拼接上传路径
*
* @memberof DiskFileUpload
*/
public getAction() {
const uploadUrl = '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
return uploadUrl;
}
/** /**
* return folder * return folder
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public getFolder() { public getFolder() {
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder); return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
return folder; }
}
/** /**
* return ownertype * return ownertype
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public getOwnertype() { public getOwnertype() {
const ownertype = typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype); return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
return ownertype; }
}
/** /**
* return ownerid * return ownerid
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public getOwnerid() { public getOwnerid() {
const ownerid = typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid); return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
return ownerid; }
}
/** /**
* * vue创建
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public created(){ public created() {
this.formStateEvent = this.formState.subscribe(($event: any) => { this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
const data = JSON.parse(JSON.stringify($event.data)); const data = JSON.parse(JSON.stringify($event.data));
// 编辑表单，保存时不进行批量更新 // 编辑表单，保存时不进行批量更新
if (data.srfuf == '1') { if (data.srfuf == '1') {
this.isCreate = false; this.isCreate = false;
this.isUpdateBatch = false; this.isUpdateBatch = false;
} }
// 当persistence = true时 // 当persistence = true时
if (this.persistence == true) { if (this.persistence == true) {
// 直接从表单的data数据里获取当前属性的值 // 直接从表单的data数据里获取当前属性的值
if (data[this.formItemName] && this.uploadFileList.length == 0) { if (data[this.formItemName] && this.uploadFileList.length == 0) {
const files = JSON.parse(data[this.formItemName]); const files = JSON.parse(data[this.formItemName]);
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
this.uploadFileList.push(files[i]); this.uploadFileList.push(files[i]);
}
} }
} else {
// 发送get请求获取文件列表
this.getFiles();
} }
} else {
// 发送get请求获取文件列表
this.getFiles();
} }
} // 表单保存完成
// 表单保存完成 if (Object.is($event.type, 'save')) {
if (Object.is($event.type, 'save')) { // 批量更新文件表中的ownerid
// 批量更新文件表中的ownerid if (this.isUpdateBatch == true && this.uploadFileList.length > 0) {
if (this.isUpdateBatch == true && this.uploadFileList.length > 0) { this.updateFileBatch(this.uploadFileList);
this.updateFileBatch(this.uploadFileList, 'update'); }
} }
} });
}); }
}
/** /**
* 获取文件列表 * 获取文件列表
* *
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public getFiles(){ public getFiles() {
// 拼接url // 拼接url
let _this:any = this; let _this: any = this;
const getUrl = '/net-disk/files/' + this.getFolder(); const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求 // 发送get请求
Axios.get(getUrl, { Axios.get(getUrl, {
...@@ -346,9 +374,9 @@ export default class DiskFileUpload extends Vue { ...@@ -346,9 +374,9 @@ export default class DiskFileUpload extends Vue {
ownertype: this.getOwnertype(), ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(), ownerid: this.getOwnerid(),
}, },
}).then(response => { }).then((response: any) => {
if (!response || response.status != 200) { if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.getFileFailure')+'!'); Message.error(_this.$t('components.diskFileUpload.getFileFailure') + '!');
return; return;
} }
// 返回的是一个jsonArray // 返回的是一个jsonArray
...@@ -358,273 +386,317 @@ export default class DiskFileUpload extends Vue { ...@@ -358,273 +386,317 @@ export default class DiskFileUpload extends Vue {
this.uploadFileList.push.apply(this.uploadFileList, files); this.uploadFileList.push.apply(this.uploadFileList, files);
} }
} }
}).catch(error => { }).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.getFileFailure')+':'+ error); Message.error(_this.$t('components.diskFileUpload.getFileFailure') + ':' + error);
}); });
} }
/** /**
* 自定义上传文件 * 自定义上传文件
* *
* @param 上传文件 * @param 上传文件
* @memberof DiskFileUpload * @memberof DiskFileUpload
*/ */
public customUploadFile(param: any) { public customUploadFile(param: any) {
// 上传的文件 // 上传的文件
let _this: any = this; let _this: any = this;
let file = param.file; let file = param.file;
// 文件大小 // formData传参
const isSize = file.size / 1024 / 1024 < this.size; let formData = new FormData();
if (!isSize) { formData.append('file', file);
Message.error(_this.$t('components.diskFileUpload.loadFailure1')+_this.size.toString()+"M!"); // 拼接url
return; const uploadUrl = this.getAction();
// 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + '!');
}
// 返回的是一个jsonobject
if (response.data) {
// 新建表单上传，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// 保存到文件列表进行显示
this.uploadFileList.push(response.data);
// persistence=true时需要持久化表单属性
if (this.persistence == true && this.uploadFileList.length > 0) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.loadFailure') + ':' + error);
})
} }
// formData传参
let formData = new FormData(); /**
formData.append('file', file); * 下载文件
// 拼接url *
const uploadUrl = this.getAction(); * @param item 下载文件
// 发送post请求 * @memberof DiskFileUpload
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { */
if (!response || response.status != 200) { public onDownload(item: any) {
Message.error(_this.$t('components.diskFileUpload.loadFailure')+'!'); // 拼接url
} let _this: any = this;
// 返回的是一个jsonobject const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
if (response.data) { const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename);
// 新建表单上传，后续需要批量更新操作 const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
if (this.isCreate == true) { // 发送get请求
this.isUpdateBatch = true; Axios.get(downloadUrl, {
headers: {
'authcode': item.authcode,
},
responseType: 'arraybuffer',
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + '!');
return;
}
// 请求成功，后台返回的是一个文件流
if (response.data) {
// 获取文件名
const disposition = response.headers['content-disposition'];
const filename = disposition.split('filename=')[1];
// 用blob对象获取文件流
let blob = new Blob([response.data], {type: response.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 创建一个a元素并设置相关属性
let a = document.createElement('a');
a.href = href;
if (name) {
a.download = name;
} else {
a.download = filename;
}
// 添加a元素到当前网页
document.body.appendChild(a);
// 触发a元素的点击事件，实现下载
a.click();
// 从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.downloadFile') + ':' + error);
});
}
/**
* 预览文件
*
* @param item 预览文件
* @memberof DiskFileUpload
*/
public onPreview(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
let previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
Axios.get(previewUrl).then((response: any) => {
if (!response || response.status != 200) {
return;
} }
// 保存到文件列表进行显示 // 返回一个url，通过自定义弹框打开
this.uploadFileList.push(response.data); if (response.data) {
// persistence=true时需要持久化表单属性 this.dialogTitle = name;
if (this.persistence == true && this.uploadFileList.length > 0) { this.showDialog = true;
const value = JSON.stringify(this.uploadFileList); this.iframeUrl = response.data;
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
} }
} }).catch((error: any) => {
}).catch(err => { Message.error(error);
Message.error(_this.$t('components.diskFileUpload.loadFailure')+':'+ err); });
}) }
}
/**
* 编辑文件
*
* @param item
* @memberof DiskFileUpload
*/
public onEdit(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const editUrl = '/net-disk/editview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// TODO:暂时用window.open
window.open(editUrl);
}
/** /**
* 下载文件 * ocr识别
* * @param item
* @param item 下载文件 * @memberof DiskFileUpload
* @memberof DiskFileUpload */
*/ public onOcr(item: any) {
public onDownload(item: any) { // 拼接url
// 拼接url const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
let _this: any = this; const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id); const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.filename); const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name; Axios.get(ocrUrl).then((response: any) => {
// 发送get请求 if (!response || response.status != 200) {
Axios.get(downloadUrl, { return;
headers: { }
'authcode': item.authcode // 返回一个url，通过自定义弹框打开
}, if (response.data) {
responseType: 'arraybuffer', this.dialogTitle = name;
}).then(response => { this.showDialog = true;
if (!response || response.status != 200) { this.iframeUrl = response.data;
Message.error(_this.$t('components.diskFileUpload.downloadFile')+'!'); }
return; }).catch((error: any) => {
Message.error(error);
});
}
/**
* 删除文件
*
* @param item
* @param index
* @memberof DiskFileUpload
*/
public onRemove(item: any, index: number) {
let _this: any = this;
if (item) {
MessageBox.confirm(_this.$t('components.diskFileUpload.deleteFile'), _this.$t('components.diskFileUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskFileUpload.true'),
cancelButtonText: _this.$t('components.diskFileUpload.false'),
type: 'warning'
}).then(() => {
//　拼接url
const deleteUrl = '/net-disk/files/' + item.id;
// 发送delete请求
Axios.delete(deleteUrl).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + '!');
}
// 从文件列表中删除
this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch((error: any) => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure') + ':' + error);
});
});
} }
// 请求成功，后台返回的是一个文件流 }
if (response.data) {
// 获取文件名 /**
const disposition = response.headers['content-disposition']; * 批量更新文件表的ownerid
const filename = disposition.split('filename=')[1]; *
// 用blob对象获取文件流 * @memberof DiskFileUpload
var blob = new Blob([response.data], {type: response.headers['content-type']}); */
// 创建下载链接 public updateFileBatch(files: any) {
var href = URL.createObjectURL(blob); let _this: any = this;
// 创建一个a元素并设置相关属性 // 拼接url
var a = document.createElement('a'); const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
a.href = href; // requestBody参数
a.download = filename; let requestBody = [];
// 添加a元素到当前网页 if (files) {
document.body.appendChild(a); requestBody = files;
// 触发a元素的点击事件，实现下载
a.click();
// 从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskFileUpload.downloadFile1'));
} }
}).catch(error => { // 发送post请求
Message.error(_this.$t('components.diskFileUpload.downloadFile')+':'+ error); Axios.post(updateUrl, requestBody, {
}); headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + '!');
return;
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskFileUpload.updateFailure') + ':' + error);
});
}
}
</script>
<style lang="less">
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
} }
/** #el-row {
* 预览文件 border: 0px solid red;
* width: 400px;
* @param item 预览文件
* @memberof DiskFileUpload
*/
public onPreview(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const previewUrl = '/net-disk/preview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(previewUrl);
} }
/** .withDrag {
* 编辑文件 border: 0px solid grey;
* width: 400px;
* @param item
* @memberof DiskFileUpload
*/
public onEdit(item: any) {
// 拼接url
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const editUrl = '/net-disk/edit/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(editUrl);
} }
/** .withoutDrag {
* ocr识别 border: 0px solid grey;
* @param item width: 400px;
* @memberof DiskFileUpload text-align: left;
*/ padding-left: 0px;
public onOcr(item: any) { padding-top: 0px;
// 拼接url margin-top: 0px;
const folder = typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
const id = typeof item.id == "string" ? item.id : JSON.stringify(item.id);
const name = typeof item.name == "string" ? item.name : JSON.stringify(item.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + item.authcode;
// 新窗口打开url
window.open(ocrUrl);
} }
/** .fileList {
* 删除文件 width: 400px;
* border: 0px solid grey;
* @param item margin-top: 0px;
* @param index }
* @memberof DiskFileUpload
*/ .fileTitle {
public onRemove(item: any, index: number) { text-align: left;
let _this:any = this; margin-left: 0px;
if (item) { }
MessageBox.confirm(_this.$t('components.diskFileUpload.deleteFile'), _this.$t('components.diskFileUpload.deleteFilePrompt'), {
confirmButtonText: _this.$t('components.diskFileUpload.true'), .fileTitle i {
cancelButtonText: _this.$t('components.diskFileUpload.false'), margin-right: 5px;
type: 'warning' }
}).then(() => {
//　拼接url .fileMain {
const deleteUrl = '/net-disk/files/' + item.id; text-align: left;
// 发送delete请求 margin-left: 0px;
Axios.delete(deleteUrl).then(response => { margin-top: -10px;
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+'!');
}
// 从文件列表中删除
this.uploadFileList.splice(index, 1);
// persistence=true时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch(error => {
// 提示删除失败
Message.error(_this.$t('components.diskFileUpload.deleteFileFailure')+':'+ error);
});
});
}
} }
/** .fileMain .el-link:nth-child(n+2) {
* 批量更新文件表的ownerid margin-left: 10px;
* }
* @memberof DiskFileUpload
*/ .dialogDiv {
public updateFileBatch(files: any, opt: any) { // el-dialog头部
let _this:any = this; .el-dialog__header {
// 拼接url height: 40px;
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid(); }
// requestBody参数
let requestBody = []; // el-dialog面板
if (files) { .el-dialog__wrapper {
requestBody = files; height: 90vh;
overflow: visible;
}
// el-dialog
.el-dialog {
height: 100%;
}
// el-dailog内容
.el-dialog__body {
height: inherit;
}
#fileIframe {
height: calc(100% - 40px);
} }
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskFileUpload.updateFailure')+'!');
return;
}
}).catch(error => {
Message.error(_this.$t('components.diskFileUpload.updateFailure')+':'+ error);
});
} }
}
</script>
<style lang="less">
#file-upload {
width: auto;
height: auto;
border: 0px solid black;
}
#el-row {
border: 0px solid red;
width: 400px;
}
.withDrag {
border: 0px solid grey;
width: 400px;
}
.withoutDrag {
border: 0px solid grey;
width: 400px;
text-align: left;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
}
.el-upload__tip {
margin-top: 0px;
}
.fileList {
width: 400px;
border: 0px solid grey;
margin-top: 0px;
}
.fileTitle {
text-align: left;
margin-left: 0px;
}
.fileTitle i {
margin-right: 5px;
}
.fileMain {
text-align: left;
margin-left: 0px;
margin-top: -10px;
}
.fileMain .el-link:nth-child(n+2) {
margin-left: 10px;
}
</style> </style>
\ No newline at end of file
src/components/disk-image-upload/disk-image-upload.vue
浏览文件 @ fd20017c
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
list-type="picture-card" list-type="picture-card"
:action="getAction()" :action="getAction()"
:headers="myHeaders" :headers="myHeaders"
:limit="limit"
:before-upload="beforeUpload" :before-upload="beforeUpload"
:http-request="customImageUpload"> :http-request="customImageUpload">
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
...@@ -15,274 +14,364 @@ ...@@ -15,274 +14,364 @@
<img class="el-upload-list__item-thumbnail" :src="file.url"> <img class="el-upload-list__item-thumbnail" :src="file.url">
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<!--预览按钮--> <!--预览按钮-->
<span class="el-upload-list__item-preview" @click="onPreview(file)" :title="$t('components.diskImageUpload.preview')" <span class="el-upload-list__item-preview" @click="onPreview(file)"
:title="$t('components.diskImageUpload.preview')"
v-show="showPreview"> v-show="showPreview">
<i class="el-icon-view"></i> <i class="el-icon-view"></i>
</span> </span>
<!--OCR按钮--> <!--OCR按钮-->
<span class="el-upload-list__item-delete" @click="onOcr(file)" :title="$t('components.diskImageUpload.OCRdiscern')" <span class="el-upload-list__item-delete" @click="onOcr(file)"
:title="$t('components.diskImageUpload.OCRdiscern')"
v-show="showOcrview && (file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/))"> v-show="showOcrview && (file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/))">
<i class="el-icon-camera"></i> <i class="el-icon-camera"></i>
</span> </span>
<!--下载按钮--> <!--下载按钮-->
<span class="el-upload-list__item-delete" @click="onDownload(file)" :title="$t('components.diskImageUpload.load')"> <span class="el-upload-list__item-delete" @click="onDownload(file)"
:title="$t('components.diskImageUpload.load')">
<i class="el-icon-download"></i> <i class="el-icon-download"></i>
</span> </span>
<!--删除按钮--> <!--删除按钮-->
<span class="el-upload-list__item-delete" @click="onRemove(file)" :title="$t('components.diskImageUpload.delete')"> <span class="el-upload-list__item-delete" @click="onRemove(file)"
:title="$t('components.diskImageUpload.delete')">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</span> </span>
</span> </span>
</div> </div>
</el-upload> </el-upload>
<!-- 预览弹框 -->
<el-dialog :visible.sync="dialogVisible" :modal="false"> <el-dialog :visible.sync="dialogVisible" :modal="false">
<img width="100%" :src="dialogImageUrl" alt=""> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
<!-- 自定义弹框 -->
<div class="dialogDiv">
<el-dialog
:title="dialogTitle"
center
width="70%"
top="5vh"
:visible="showDialog"
:close-on-click-modal="true"
:show-close="true"
:before-close="dialogClose"
:modal-append-to-body="false">
<div style="height: 100%;">
<iframe id="fileIframe" :src="iframeUrl" frameborder="0" width="100%"></iframe>
</div>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue, Prop, Watch} from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {Message, MessageBox} from 'element-ui'; import {Message, MessageBox} from 'element-ui';
import Axios from 'axios'; import Axios from 'axios';
import {Subject, Unsubscribable} from 'rxjs'; import {Subject, Unsubscribable} from 'rxjs';
@Component({}) @Component({})
export default class DiskImageUplaod extends Vue { export default class DiskImageUplaod extends Vue {
/** /**
* 当前表单对象 * 当前表单对象
* *
* @type {*} * @type {*}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public data!: any; @Prop() public data!: any;
/** /**
* 当前属性名 * 当前属性名
* *
* @type {string} * @type {string}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public formItemName!: string; @Prop() public formItemName!: string;
/** /**
* 当前属性值 * 当前属性值
* *
* @type {string} * @type {string}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public value!: string; @Prop() public value!: string;
/** /**
* 当前表单状态 * 当前表单状态
* *
* @type {*} * @type {*}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public formState!: any; @Prop() public formState!: any;
/** /**
* 默认为当前实体名称，有指定则按表单参数 * 默认为当前实体名称，有指定则按表单参数
* *
* @type {string} * @type {string}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public folder!: string; @Prop() public folder!: string;
/** /**
* 默认为当前实体主键id，有指定则按表单参数 * 默认为当前实体主键id，有指定则按表单参数
* *
* @type {string} * @type {string}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public ownerid!: string; @Prop() public ownerid!: string;
/** /**
* 默认为当前属性名，有指定则按表单参数 * 默认为当前属性名，有指定则按表单参数
* *
* @type {string} * @type {string}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop() public ownertype!: string; @Prop() public ownertype!: string;
/** /**
* 持久化 * 持久化
* *
* @type {boolean} * @type {boolean}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop({default: false}) public persistence?: boolean; @Prop({default: false}) public persistence?: boolean;
/** /**
* 是否显示预览按钮 * 是否显示预览按钮
* *
* @type {boolean} * @type {boolean}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop({default: false}) public showPreview?: boolean; @Prop({default: false}) public showPreview?: boolean;
/** /**
* 是否显示OCR按钮 * 是否显示OCR按钮
* *
* @type {boolean} * @type {boolean}
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
@Prop({default: false}) public showOcrview?: boolean; @Prop({default: false}) public showOcrview?: boolean;
/**
* 单文件大小 /**
* * 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存）
* @type {number} *
* @memberof DiskImageUplaod * @type {string}
*/ * @memberof DiskImageUplaod
@Prop({default: 1}) public size!: number; */
public srfuf: string = '0';
/**
* 文件上传个数 /**
* * 图片列表
* @type {number} *
* @memberof DiskImageUplaod * @type {Array<any>}
*/ * @memberof DiskImageUplaod
@Prop({default: 5}) public limit!: number; */
public imageList: Array<any> = [];
/**
* 表单是否处于编辑状态（有真实主键,srfuf='1';srfuf='0'时处于新建未保存） /**
* * 当前登陆人的token
* @type {string} *
* @memberof DiskImageUplaod * @type {string}
*/ * @memberof DiskImageUplaod
public srfuf: string = '0'; */
public token: string = "Bearer " + localStorage.getItem('token');
/**
* 图片列表 /**
* * 上传文件请求头
* @type {Array<any>} *
* @memberof DiskImageUplaod * @type {*}
*/ * @memberof DiskImageUplaod
public imageList: Array<any> = []; */
public myHeaders: any = {Authorization: this.token};
/**
* 当前登陆人的token /**
* * 表单状态事件
* @type {string} *
* @memberof DiskImageUplaod * @type {*}
*/ * @memberof DiskImageUplaod
public token: string = "Bearer " + localStorage.getItem('token'); */
public formStateEvent: any | Unsubscribable | undefined;
/**
* 上传文件请求头 /**
* * 批量更新标识，false为不更新，true才可以更新
* @type {*} *
* @memberof DiskImageUplaod * @type {boolean}
*/ * @memberof DiskImageUplaod
public myHeaders: any = {Authorization: this.token}; */
public isUpdateBatch: boolean = true;
/**
* 表单状态事件 /**
* * 新建状态标识,true为新建，false为编辑
* @type {*} *
* @memberof DiskImageUplaod * @type {boolean}
*/ * @memberof DiskImageUplaod
public formStateEvent: any | Unsubscribable | undefined; */
public isCreate: boolean = true;
/**
* 批量更新标识，false为不更新，true才可以更新 /**
* * 预览弹出框显示标识，true显示，false隐藏
* @type {boolean} *
* @memberof DiskImageUplaod * @type {boolean}
*/ * @memberof DiskImageUplaod
public isUpdateBatch: boolean = true; */
public dialogVisible: boolean = false;
/**
* 新建状态标识,true为新建，false为编辑 /**
* * 预览弹出框中的图片地址
* @type {boolean} *
* @memberof DiskImageUplaod * @type {string}
*/ * @memberof DiskImageUplaod
public isCreate: boolean = true; */
public dialogImageUrl: string = '';
/**
* 预览弹出框显示标识，true显示，false隐藏 /**
* * 存放图片的fileid,用于图片列表定位
* @type {boolean} *
* @memberof DiskImageUplaod * @type {boolean}
*/ * @memberof DiskImageUplaod
public dialogVisible: boolean = false; */
public imageFileids: Array<any> = [];
/**
* 预览弹出框中的图片地址 /**
* * 自定义弹框标题
* @type {string} *
* @memberof DiskImageUplaod * @type {*}
*/ * @memberof DiskImageUplaod
public dialogImageUrl: string = ''; */
public dialogTitle: any = '';
/**
* 存放图片的fileid,用于图片列表定位 /**
* * 是否显示自定义弹框
* @type {boolean} *
* @memberof DiskImageUplaod * @type {boolean}
*/ * @memberof DiskImageUplaod
public imageFileids: Array<any> = []; */
public showDialog: boolean = false;
/**
* 拼接上传路径 /**
* * 嵌入自定义弹框中iframe的url
* @memberof DiskImageUplaod *
*/ * @type {*}
public getAction() { * @memberof DiskImageUplaod
return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid(); */
} public iframeUrl: any = '';
/**
* 关闭自定义弹框
*
* @memberof DiskImageUplaod
*/
public dialogClose() {
this.dialogTitle = '';
this.showDialog = false;
this.iframeUrl = '';
let iframe: any = document.getElementById("fileIframe");
iframe.parentNode.removeChild("fileIframe");
}
/** /**
* return folder * 拼接上传路径
* *
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public getFolder() { public getAction() {
return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder); return '/net-disk/upload/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + '&ownerid=' + this.getOwnerid();
} }
/** /**
* return ownertype * return folder
* *
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public getOwnertype() { public getFolder() {
return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype); return typeof this.folder == "string" ? this.folder : JSON.stringify(this.folder);
} }
/** /**
* return ownerid * return ownertype
* *
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public getOwnerid() { public getOwnertype() {
return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid); return typeof this.ownertype == "string" ? this.ownertype : JSON.stringify(this.ownertype);
} }
/**
* return ownerid
*
* @memberof DiskImageUplaod
*/
public getOwnerid() {
return typeof this.ownerid == "string" ? this.ownerid : JSON.stringify(this.ownerid);
}
/** /**
* vue生命周期create * vue创建
* *
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public created() { public created() {
this.formStateEvent = this.formState.subscribe(($event: any) => { this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
const data = JSON.parse(JSON.stringify($event.data)); const data = JSON.parse(JSON.stringify($event.data));
// 编辑表单，保存时不进行批量更新 // 编辑表单，保存时不进行批量更新
if (data.srfuf == '1') { if (data.srfuf == '1') {
this.isCreate = false; this.isCreate = false;
this.isUpdateBatch = false; this.isUpdateBatch = false;
}
// 当persistence = true时,表单持久化
if (this.persistence == true) {
// 直接从表单的data数据里获取当前属性的值
if (data[this.formItemName] && this.imageList.length == 0) {
const files = JSON.parse(data[this.formItemName]);
files.forEach((item: any, i: number) => {
// 图片列表显示缩略图需要获取真实的图片信息
if (item.id && item.name) {
this.getRealImageData(item);
}
});
}
} else {
// 发送get请求获取图片列表
this.getFiles();
}
} }
// 当persistence = true时,表单持久化 // 表单保存完成
if (this.persistence == true) { if (Object.is($event.type, 'save')) {
// 直接从表单的data数据里获取当前属性的值 // 批量更新文件表中的ownerid
if (data[this.formItemName] && this.imageList.length == 0) { if (this.isUpdateBatch == true && this.imageList.length > 0) {
const files = JSON.parse(data[this.formItemName]); this.updateFileBatch(this.imageList);
}
}
});
}
/**
* 获取图片列表
*
* @memberof DiskImageUplaod
*/
public getFiles() {
// 拼接url
let _this: any = this;
const getUrl = '/net-disk/files/' + this.getFolder();
// 发送get请求
Axios.get(getUrl, {
params: {
ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(),
},
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.getImageFailure') + "!");
return;
}
// 返回的是一个jsonArray
if (response.data) {
const files = JSON.parse(JSON.stringify(response.data));
if (this.imageList.length == 0) {
files.forEach((item: any, i: number) => { files.forEach((item: any, i: number) => {
// 图片列表显示缩略图需要获取真实的图片信息 // 图片列表显示缩略图需要获取真实的图片信息
if (item.id && item.name) { if (item.id && item.name) {
...@@ -290,358 +379,347 @@ export default class DiskImageUplaod extends Vue { ...@@ -290,358 +379,347 @@ export default class DiskImageUplaod extends Vue {
} }
}); });
} }
} else {
// 发送get请求获取图片列表
this.getFiles();
} }
} }).catch((error: any) => {
// 表单保存完成 Message.error(_this.$t('components.diskImageUpload.getImageFailure') + ':' + error);
if (Object.is($event.type, 'save')) { });
// 批量更新文件表中的ownerid }
if (this.isUpdateBatch == true && this.imageList.length > 0) {
this.updateFileBatch(this.imageList); /**
* 获取真实的图片信息
* @param file
* @memberof DiskImageUplaod
*/
public getRealImageData(file: any) {
let fileData = file;
let _this: any = this;
// 拼接url，与下载一致
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + fileData.id + '/' + fileData.name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': fileData.authcode
},
responseType: 'blob',
}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + '!');
} }
} // 请求成功，后台返回的是一个文件流
}); if (response.data) {
} // 用blob对象获取文件流
var blob = new Blob([response.data], {type: response.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 将下载链接保存到图片中
fileData.url = href;
// 保存图片fileid
if (fileData.fileid) {
this.imageFileids.push(fileData.fileid);
} else if (fileData.id) {
this.imageFileids.push(fileData.id);
} else {
Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return;
}
// 保存图片到图片列表进行显示
this.imageList.push(fileData);
} else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
}
}).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + ':' + error);
});
}
/** /**
* 获取图片列表 * 上传之前
* * @param file
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public getFiles() { public beforeUpload(file: any) {
// 拼接url // 支持上传的图片格式
let _this:any = this; let _this: any = this;
const getUrl = '/net-disk/files/' + this.getFolder(); if (!file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/)) {
// 发送get请求 Message.error(_this.$t('components.diskImageUpload.uploadImageFailure1'));
Axios.get(getUrl, { return false;
params: {
ownertype: this.getOwnertype(),
ownerid: this.getOwnerid(),
},
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.getImageFailure')+"!");
return;
} }
// 返回的是一个jsonArray }
if (response.data) {
const files = JSON.parse(JSON.stringify(response.data)); /**
if (this.imageList.length == 0) { * 自定义图片上传
files.forEach((item: any, i: number) => { * @param param
// 图片列表显示缩略图需要获取真实的图片信息 * @memberof DiskImageUplaod
if (item.id && item.name) { */
this.getRealImageData(item); public customImageUpload(param: any) {
let _this: any = this;
// 上传的文件
let file = param.file;
// formData传参
let formData = new FormData();
formData.append('file', file);
// 拼接url
const uploadUrl = this.getAction();
// 发送post请求
Axios.post(uploadUrl, formData, {timeout: 2000}).then((response: any) => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure') + "!");
}
// 返回的是一个jsonobject
if (response.data) {
let returnData = response.data;
// 拼接缩略图下载url
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + returnData.id + '/' + returnData.name;
// 发送get请求
Axios.get(downloadUrl, {
headers: {
'authcode': returnData.authcode
},
responseType: 'blob',
}).then((response2) => {
if (!response2 || response2.status != 200) {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + "!");
return;
} }
// 请求成功，后台返回的是一个文件流
if (response2.data) {
// 用blob对象获取文件流
var blob = new Blob([response2.data], {type: response2.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 将下载链接保存到本次上传成功后返回的jsonobject中
returnData.url = href;
// 保存jsonobject中的图片fileid
if (returnData.fileid) {
this.imageFileids.push(returnData.fileid);
} else if (returnData.id) {
this.imageFileids.push(returnData.id);
} else {
Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return;
}
// 保存jsonobject到图片列表进行显示
this.imageList.push(returnData);
// 新建表单上传时，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// persistence=true时，需要持久化表单属性
if (this.persistence == true && this.imageList.length > 0) {
const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
} else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1'));
}
}).catch((error2: any) => {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure') + ':' + error2);
}); });
} }
} }).catch((error: any) => {
}).catch(error => { Message.error(_this.$t('components.diskImageUpload.uploadImageFailure') + ':' + error);
Message.error(_this.$t('components.diskImageUpload.getImageFailure')+':'+ error); });
}); }
}
/**
* 获取真实的图片信息 /**
* @param file *　预览
* @memberof DiskImageUplaod * @param file
*/ * @memberof DiskImageUplaod
public getRealImageData(file: any) { */
let fileData = file; public onPreview(file: any) {
let _this: any = this; let _this: any = this;
// 拼接url，与下载一致 if (file.url) {
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + fileData.id + '/' + fileData.name; this.dialogImageUrl = file.url;
// 发送get请求 this.dialogVisible = true;
Axios.get(downloadUrl, {
headers: {
'authcode': fileData.authcode
},
responseType: 'blob',
}).then(res => {
if (!res || res.status != 200) {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+'!');
}
// 请求成功，后台返回的是一个文件流
if (res.data) {
// 用blob对象获取文件流
var blob = new Blob([res.data], {type: res.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 将下载链接保存到图片中
fileData.url = href;
// 保存图片fileid
if (fileData.fileid) {
this.imageFileids.push(fileData.fileid);
} else if (fileData.id) {
this.imageFileids.push(fileData.id);
} else {
Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return;
}
// 保存图片到图片列表进行显示
this.imageList.push(fileData);
} else { } else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1')); Message.error(_this.$t('components.diskImageUpload.notImageUrl'));
} }
}).catch(error => {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+':' + error);
});
}
/**
* 上传之前
* @param file
* @memberof DiskImageUplaod
*/
public beforeUpload(file: any) {
// 支持上传的图片格式
let _this: any = this;
if (!file.name.match(/^.+\.(gif|GIF|jpg|JPG|jpeg|JPEG|png|PNG|bmp|BMP)$/)) {
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure1'));
return false;
} }
// 文件大小
const isSize = file.size / 1024 / 1024 < this.size; /**
if (!isSize) { * Ocr识别
Message.error(_this.$t('components.diskImageUpload.uploadFailure')+this.size.toString()+"M!"); * @param file
return false; * @memberof DiskImageUplaod
*/
public onOcr(file: any) {
// 拼接url
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + file.authcode;
Axios.get(ocrUrl).then((response: any) => {
if (!response || response.status != 200) {
return;
}
// 返回一个url，通过自定义弹框打开
if (response.data) {
this.dialogTitle = name;
this.showDialog = true;
this.iframeUrl = response.data;
}
}).catch((error: any) => {
Message.error(error);
});
} }
}
/** /**
* 自定义图片上传 * 下载
* @param param * @param file
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public customImageUpload(param: any) { public onDownload(file: any) {
let _this: any = this; // 拼接url
// 上传的文件 let _this: any = this;
let file = param.file; const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
// formData传参 const name = typeof file.name == "string" ? file.name : JSON.stringify(file.filename);
let formData = new FormData(); const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name;
formData.append('file', file); // 发送get请求
// 拼接url Axios.get(downloadUrl, {
const uploadUrl = this.getAction(); headers: {
// 发送post请求 'authcode': file.authcode
Axios.post(uploadUrl, formData, {timeout: 2000}).then(response => { },
if (!response || response.status != 200) { responseType: 'blob',
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure')+"!"); }).then((response: any) => {
} if (!response || response.status != 200) {
// 返回的是一个jsonobject Message.error(_this.$t('components.diskImageUpload.loadImageFailure2') + '!');
if (response.data) { return;
let returnData = response.data; }
// 拼接缩略图下载url // 请求成功，后台返回的是一个文件流
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + returnData.id + '/' + returnData.name; if (response.data) {
// 发送get请求 // 获取文件名
Axios.get(downloadUrl, { const disposition = response.headers['content-disposition'];
headers: { const filename = disposition.split('filename=')[1];
'authcode': returnData.authcode // 用blob对象获取文件流
}, var blob = new Blob([response.data], {type: response.headers['content-type']});
responseType: 'blob', // 通过文件流创建下载链接
}).then(res => { var href = URL.createObjectURL(blob);
if (!res || res.status != 200) { // 创建一个a元素并设置相关属性
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+"!"); var a = document.createElement('a');
return; a.href = href;
} if (name) {
// 请求成功，后台返回的是一个文件流 a.download = name;
if (res.data) {
// 用blob对象获取文件流
var blob = new Blob([res.data], {type: res.headers['content-type']});
// 通过文件流创建下载链接
var href = URL.createObjectURL(blob);
// 将下载链接保存到本次上传成功后返回的jsonobject中
returnData.url = href;
// 保存jsonobject中的图片fileid
if (returnData.fileid) {
this.imageFileids.push(returnData.fileid);
} else if (returnData.id) {
this.imageFileids.push(returnData.id);
} else {
Message.error(_this.$t('components.diskImageUpload.ImageIdNone'));
return;
}
// 保存jsonobject到图片列表进行显示
this.imageList.push(returnData);
// 新建表单上传时，后续需要批量更新操作
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
// persistence=true时，需要持久化表单属性
if (this.persistence == true && this.imageList.length > 0) {
const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
} else { } else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure1')); a.download = filename;
} }
}).catch(error => { // 添加a元素到当前网页
Message.error(_this.$t('components.diskImageUpload.loadImageFailure')+':' + error); document.body.appendChild(a);
}); // 触发a元素的点击事件，实现下载
} a.click();
}).catch(err => { // 下载完成，从当前网页移除a元素
Message.error(_this.$t('components.diskImageUpload.uploadImageFailure')+':' + err); document.body.removeChild(a);
}); // 释放blob对象
} URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure3'));
/** }
*　预览 }).catch((error: any) => {
* @param file Message.error(_this.$t('components.diskImageUpload.loadImageFailure2') + ':' + error);
* @memberof DiskImageUplaod });
*/
public onPreview(file: any) {
let _this: any = this;
if (file.url) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
} else {
Message.error(_this.$t('components.diskImageUpload.notImageUrl'));
} }
}
/**
* Ocr识别
* @param file
* @memberof DiskImageUplaod
*/
public onOcr(file: any) {
// 拼接url
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id);
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.name);
const ocrUrl = '/net-disk/ocrview/' + this.getFolder() + '/' + id + '/' + name + '?authcode=' + file.authcode;
// 新窗口打开url
window.open(ocrUrl);
}
/** /**
* 下载 * 删除
* @param file * @param file
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public onDownload(file: any) { public onRemove(file: any) {
// 拼接url let _this: any = this;
let _this: any = this; if (file) {
const id = typeof file.id == "string" ? file.id : JSON.stringify(file.id); MessageBox.confirm(_this.$t('components.diskImageUpload.deleteFile'), _this.$t('components.diskImageUpload.deleteFilePrompt'), {
const name = typeof file.name == "string" ? file.name : JSON.stringify(file.filename); confirmButtonText: _this.$t('components.diskImageUpload.true'),
const downloadUrl = '/net-disk/download/' + this.getFolder() + '/' + id + '/' + name; cancelButtonText: _this.$t('components.diskImageUpload.false'),
// 发送get请求 type: 'warning'
Axios.get(downloadUrl, { }).then(() => {
headers: { if (this.imageFileids.indexOf(file.id) != -1) {
'authcode': file.authcode // 要删除的图片在图片列表中的下标
}, const index = this.imageFileids.indexOf(file.id);
responseType: 'blob', //　拼接url
}).then(response => { const deleteUrl = '/net-disk/files/' + file.id;
if (!response || response.status != 200) { // 发送delete请求
Message.error(_this.$t('components.diskImageUpload.loadImageFailure2')+'!'); Axios.delete(deleteUrl).then((response: any) => {
return; if (!response || response.status != 200) {
} Message.error(_this.$t('components.diskImageUpload.deleteImageFailure') + '!');
// 请求成功，后台返回的是一个文件流 }
if (response.data) { // 从fileid数组中删除
// 获取文件名 this.imageFileids.splice(index, 1);
const disposition = response.headers['content-disposition']; // 从图片列表中删除
const filename = disposition.split('filename=')[1]; this.imageList.splice(index, 1);
// 用blob对象获取文件流 // persistence=true,时需要持久化表单属性
var blob = new Blob([response.data], {type: response.headers['content-type']}); if (this.persistence == true) {
// 通过文件流创建下载链接 const value = JSON.stringify(this.imageList);
var href = URL.createObjectURL(blob); this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
// 创建一个a元素并设置相关属性 }
var a = document.createElement('a'); }).catch((error: any) => {
a.href = href; // 提示删除失败
a.download = filename; Message.error(_this.$t('components.diskImageUpload.deleteImageFailure') + ':' + error);
// 添加a元素到当前网页 });
document.body.appendChild(a); }
// 触发a元素的点击事件，实现下载 });
a.click();
// 下载完成，从当前网页移除a元素
document.body.removeChild(a);
// 释放blob对象
URL.revokeObjectURL(href);
} else {
Message.error(_this.$t('components.diskImageUpload.loadImageFailure3'));
} }
}).catch(error => { }
Message.error(_this.$t('components.diskImageUpload.loadImageFailure2')+':' + error);
});
}
/** /**
* 删除 * 批量更新文件表的ownerid
* @param file * @param files
* @memberof DiskImageUplaod * @memberof DiskImageUplaod
*/ */
public onRemove(file: any) { public updateFileBatch(files: any) {
let _this: any = this; let _this: any = this;
if (file) { // 拼接url
MessageBox.confirm(_this.$t('components.diskImageUpload.deleteFile'),_this.$t('components.diskImageUpload.deleteFilePrompt'), { const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
confirmButtonText: _this.$t('components.diskImageUpload.true'), // requestBody参数
cancelButtonText: _this.$t('components.diskImageUpload.false'), let requestBody = [];
type: 'warning' if (files) {
}).then(() => { requestBody = files;
if (this.imageFileids.indexOf(file.id) != -1) { }
// 要删除的图片在图片列表中的下标 // 发送post请求
const index = this.imageFileids.indexOf(file.id); Axios.post(updateUrl, requestBody, {
//　拼接url headers: {
const deleteUrl = '/net-disk/files/' + file.id; "Content-Type": "application/json;charset=UTF-8"
// 发送delete请求 },
Axios.delete(deleteUrl).then(response => { timeout: 2000
if (!response || response.status != 200) { }).then((response: any) => {
Message.error(_this.$t('components.diskImageUpload.deleteImageFailure')+'!'); if (!response || response.status != 200) {
} Message.error(_this.$t('components.diskImageUpload.updateFailure') + '!');
// 从fileid数组中删除 return;
this.imageFileids.splice(index, 1);
// 从图片列表中删除
this.imageList.splice(index, 1);
// persistence=true,时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.imageList);
this.$emit('formitemvaluechange', {name: this.formItemName, value: value});
}
}).catch(error => {
// 提示删除失败
Message.error(_this.$t('components.diskImageUpload.deleteImageFailure')+':' + error);
});
} }
}).catch((error: any) => {
Message.error(_this.$t('components.diskImageUpload.updateFailure') + ':' + error);
}); });
} }
}
/**
* 批量更新文件表的ownerid
* @param files
* @memberof DiskImageUplaod
*/
public updateFileBatch(files: any) {
let _this: any = this;
// 拼接url
const updateUrl = '/net-disk/files/' + this.getFolder() + '?ownertype=' + this.getOwnertype() + "&ownerid=" + this.getOwnerid();
// requestBody参数
let requestBody = [];
if (files) {
requestBody = files;
}
// 发送post请求
Axios.post(updateUrl, requestBody, {
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
timeout: 2000
}).then(response => {
if (!response || response.status != 200) {
Message.error(_this.$t('components.diskImageUpload.updateFailure')+'!');
return;
}
}).catch(error => {
Message.error(_this.$t('components.diskImageUpload.updateFailure')+':' + error);
});
} }
</script>
<style lang="less">
.dialogDiv {
// el-dialog头部
.el-dialog__header {
height: 40px;
}
} // el-dialog面板
</script> .el-dialog__wrapper {
height: 90vh;
overflow: visible;
}
// el-dialog
.el-dialog {
height: 100%;
}
<style scoped> // el-dailog内容
.el-dialog__body {
height: inherit;
}
// iframe
#fileIframe {
height: calc(100% - 40px);
}
}
</style> </style>
\ No newline at end of file
src/engine/view/calendar-exp-view-engine.ts
浏览文件 @ fd20017c
...@@ -81,6 +81,9 @@ export default class CalendarExpViewEngine extends ViewEngine { ...@@ -81,6 +81,9 @@ export default class CalendarExpViewEngine extends ViewEngine {
this.view.$emit('viewload', args); this.view.$emit('viewload', args);
} }
if (Object.is(eventName, 'selectionchange')) { if (Object.is(eventName, 'selectionchange')) {
if(this.calendarExpBar && this.calendarExpBar.calcNavigationToolbarState && this.calendarExpBar.calcNavigationToolbarState instanceof Function){
this.calendarExpBar.calcNavigationToolbarState();
}
this.view.$emit('viewdataschange', args); this.view.$emit('viewdataschange', args);
} }
if (Object.is(eventName, 'activated')) { if (Object.is(eventName, 'activated')) {
......
src/engine/view/data-view-exp-view-engine.ts
浏览文件 @ fd20017c
...@@ -78,6 +78,9 @@ export default class DataViewExpViewEngine extends ViewEngine { ...@@ -78,6 +78,9 @@ export default class DataViewExpViewEngine extends ViewEngine {
*/ */
public dataviewExpBarEvent(eventName: string, args: any): void { public dataviewExpBarEvent(eventName: string, args: any): void {
if (Object.is(eventName, 'load')) { if (Object.is(eventName, 'load')) {
if(this.dataviewExpBar && this.dataviewExpBar.calcNavigationToolbarState && this.dataviewExpBar.calcNavigationToolbarState instanceof Function){
this.dataviewExpBar.calcNavigationToolbarState();
}
this.view.$emit('viewload', args); this.view.$emit('viewload', args);
} }
if (Object.is(eventName, 'selectionchange')) { if (Object.is(eventName, 'selectionchange')) {
......
src/engine/view/grid-exp-view-engine.ts
浏览文件 @ fd20017c
...@@ -78,6 +78,9 @@ export default class GridExpViewEngine extends ViewEngine { ...@@ -78,6 +78,9 @@ export default class GridExpViewEngine extends ViewEngine {
*/ */
public gridExpBarEvent(eventName: string, args: any): void { public gridExpBarEvent(eventName: string, args: any): void {
if (Object.is(eventName, 'load')) { if (Object.is(eventName, 'load')) {
if(this.gridExpBar && this.gridExpBar.calcNavigationToolbarState && this.gridExpBar.calcNavigationToolbarState instanceof Function){
this.gridExpBar.calcNavigationToolbarState();
}
this.view.$emit('viewload', args); this.view.$emit('viewload', args);
} }
if (Object.is(eventName, 'selectionchange')) { if (Object.is(eventName, 'selectionchange')) {
......
src/engine/view/list-exp-view-engine.ts
浏览文件 @ fd20017c
...@@ -78,6 +78,9 @@ export default class ListExpViewEngine extends ViewEngine { ...@@ -78,6 +78,9 @@ export default class ListExpViewEngine extends ViewEngine {
*/ */
public listExpBarEvent(eventName: string, args: any): void { public listExpBarEvent(eventName: string, args: any): void {
if (Object.is(eventName, 'load')) { if (Object.is(eventName, 'load')) {
if(this.listExpBar && this.listExpBar.calcNavigationToolbarState && this.listExpBar.calcNavigationToolbarState instanceof Function){
this.listExpBar.calcNavigationToolbarState();
}
this.view.$emit('viewload', args); this.view.$emit('viewload', args);
} }
if (Object.is(eventName, 'selectionchange')) { if (Object.is(eventName, 'selectionchange')) {
......
src/engine/view/md-view-engine.ts
浏览文件 @ fd20017c
...@@ -401,10 +401,10 @@ export default class MDViewEngine extends ViewEngine { ...@@ -401,10 +401,10 @@ export default class MDViewEngine extends ViewEngine {
if (this.view.viewparams && Object.keys(this.view.viewparams).length > 0) { if (this.view.viewparams && Object.keys(this.view.viewparams).length > 0) {
Object.assign(arg, this.view.viewparams); Object.assign(arg, this.view.viewparams);
} }
if (this.getSearchForm() && this.view.isExpandSearchForm) { if (this.getSearchForm()) {
Object.assign(arg, this.getSearchForm().getData()); Object.assign(arg, this.getSearchForm().getData());
} }
if (this.view && this.view.$refs.searchbar && this.view.isExpandSearchForm) { if (this.view && this.view.$refs.searchbar) {
Object.assign(arg, this.view.$refs.searchbar.getData()); Object.assign(arg, this.view.$refs.searchbar.getData());
} }
if (this.view && !this.view.isExpandSearchForm) { if (this.view && !this.view.isExpandSearchForm) {
......
src/engine/view/tree-exp-view-engine.ts
浏览文件 @ fd20017c
...@@ -79,6 +79,9 @@ export default class TreeExpView extends ViewEngine { ...@@ -79,6 +79,9 @@ export default class TreeExpView extends ViewEngine {
*/ */
public treeExpBarEvent(eventName: string, args: any): void { public treeExpBarEvent(eventName: string, args: any): void {
if (Object.is(eventName, 'load')) { if (Object.is(eventName, 'load')) {
if(this.treeExpBar && this.treeExpBar.calcNavigationToolbarState && this.treeExpBar.calcNavigationToolbarState instanceof Function){
this.treeExpBar.calcNavigationToolbarState();
}
this.view.$emit('viewload', args); this.view.$emit('viewload', args);
} }
if (Object.is(eventName, 'selectionchange')) { if (Object.is(eventName, 'selectionchange')) {
......
src/store/getters.ts
浏览文件 @ fd20017c
...@@ -47,12 +47,21 @@ export const getLocalData = (state: any) => () => { ...@@ -47,12 +47,21 @@ export const getLocalData = (state: any) => () => {
* @param state * @param state
*/ */
export const getAppData = (state: any) => () => { export const getAppData = (state: any) => () => {
if(!state.appdata){
state.appdata = {};
}
let result:any = JSON.parse(JSON.stringify(state.appdata)); let result:any = JSON.parse(JSON.stringify(state.appdata));
let copyContext:any = result.context?result.context:{};
if(state.localdata && Object.keys(state.localdata).length >0){ if(state.localdata && Object.keys(state.localdata).length >0){
let copyContext:any = result.context?result.context:{};
Object.assign(copyContext,state.localdata); Object.assign(copyContext,state.localdata);
result.context = copyContext; }else if(localStorage.getItem('localdata')){
try{
Object.assign(copyContext,JSON.parse(localStorage.getItem('localdata') as string));
}catch(error){
console.warn(error);
}
} }
result.context = copyContext;
return result; return result;
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或