|
|
@@ -102,13 +102,38 @@
|
|
|
</ElCol>
|
|
|
<ElCol :md="24" :lg="12" v-if="dialogType == 'add' || dialogType == 'edit'">
|
|
|
<el-form-item label="logo">
|
|
|
- <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="sysIconupload"
|
|
|
- ref="upload1" :limit="1" :class="{ disabled: uploadDisabled }" :on-remove="handleRemove">
|
|
|
- <img v-if="sysIconList.url" :src="sysIconList.url" class="avatar" style="width: 100%;height: 100%;" />
|
|
|
- <el-icon v-else class="avatar-uploader-icon">
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- </el-upload>
|
|
|
+ <div class="flex f-c a-start">
|
|
|
+ <el-upload action="" v-if="!companyImgUrl" :auto-upload="false" :show-file-list="false"
|
|
|
+ accept=".png, .jpg, .jpeg" @change="uploadImage($event)">
|
|
|
+ <el-button type="primary" size="default">
|
|
|
+ <template #icon>
|
|
|
+ <el-icon>
|
|
|
+ <Upload />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ 上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ companyImgName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload :show-file-list="false" :auto-upload="false" accept=".png, .jpg, .jpeg"
|
|
|
+ @change="uploadImage($event)" style="display: flex; align-items: center;">
|
|
|
+ <el-icon class="btn-icon">
|
|
|
+ <Upload />
|
|
|
+ </el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView">
|
|
|
+ <View />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon class="btn-icon" @click="download(companyImgUrl,companyImgName)">
|
|
|
+ <Download />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon class="btn-icon" @click="deleteImage">
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
</ElCol>
|
|
|
</el-form>
|
|
|
@@ -122,6 +147,9 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+ <div class="image-view" v-if="imageShow" @click="imageShow = false">
|
|
|
+ <img :src="companyImgUrl" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -195,9 +223,7 @@ const cpmpanyformRules = ref<FormRules>({
|
|
|
{ required: true, trigger: 'change', message: '请上传图片' },
|
|
|
],
|
|
|
});
|
|
|
-const sysIconList = reactive({
|
|
|
- url: "",
|
|
|
-})
|
|
|
+
|
|
|
const props = {
|
|
|
expandTrigger: 'hover' as const,
|
|
|
value: 'areaCode',
|
|
|
@@ -206,6 +232,9 @@ const props = {
|
|
|
checkStrictly: true,
|
|
|
|
|
|
}
|
|
|
+const imageShow=ref(false);//图片预览开关
|
|
|
+const companyImgName = ref();
|
|
|
+const companyImgUrl = ref();
|
|
|
const FormRef = ref<FormInstance>()
|
|
|
const provinceoptions = ref()//省市区回显数据
|
|
|
const areaOptions = ref()//省市区数据
|
|
|
@@ -213,7 +242,6 @@ const dialogTitle = ref('添加保险公司')//弹窗title
|
|
|
const dialogType = ref('add')//弹窗title add | edit | subsidiaryadd | subsidiaryedit
|
|
|
const fromSize = ref<ComponentSize>('large')//表单大小
|
|
|
const loading = ref(false)
|
|
|
-const uploadDisabled = ref(false)//图片回显去掉上传按键
|
|
|
const tableHeight = ref(''); // 初始化表格高度
|
|
|
const multipleTableRef = ref();
|
|
|
const tabledata = ref([]);//树形数据
|
|
|
@@ -241,8 +269,7 @@ const columns: Column[] = [
|
|
|
} else if (type == 0) {
|
|
|
return <ElTag>渠道</ElTag>;
|
|
|
} else {
|
|
|
- return <ElTag>{type}</ElTag>;
|
|
|
-
|
|
|
+ return <ElTag>寿险</ElTag>;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -346,8 +373,9 @@ const companyEdit = (column: any) => {
|
|
|
cpmpanyform.nameSimple = column.nameSimple;
|
|
|
cpmpanyform.remark = column.remark;
|
|
|
cpmpanyform.type = column.type;
|
|
|
- cpmpanyform.logo = column.logo;
|
|
|
- sysIconList.url = column.downloadUrl;
|
|
|
+ cpmpanyform.logo = column.logoFile.id;
|
|
|
+ companyImgUrl.value=column.downloadUrl
|
|
|
+ companyImgName.value=column.logoFile.fileName;
|
|
|
} else {
|
|
|
dialogType.value = 'subsidiaryedit';
|
|
|
dialogTitle.value = '编辑';
|
|
|
@@ -360,7 +388,6 @@ const companyEdit = (column: any) => {
|
|
|
cpmpanyform.parentId = column.parentId;
|
|
|
cpmpanyform.parentName = column.parentName;
|
|
|
cpmpanyform.remark = column.remark;
|
|
|
- sysIconList.url = column.downloadUrl;
|
|
|
}
|
|
|
|
|
|
// (Object.keys(cpmpanyform) as (keyof typeof cpmpanyform)[]).forEach((key) => {
|
|
|
@@ -439,21 +466,47 @@ const saveInfo = async (formEl: FormInstance | undefined) => {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-const sysIconupload = (file: any) => {
|
|
|
- let files = file.raw;
|
|
|
+
|
|
|
+const uploadImage = async (file: any) => {
|
|
|
+ let files = file.raw
|
|
|
const params = new FormData(); // 声明formData数据类型
|
|
|
params.append("file", files);
|
|
|
api.toolApi.fileupload(params).then((res: any) => {
|
|
|
if (res.code == 200) {
|
|
|
cpmpanyform.logo = res.data.id;
|
|
|
- uploadDisabled.value = true;
|
|
|
+ companyImgName.value = res.data.fileName;
|
|
|
+ companyImgUrl.value = res.data.downloadUrl;
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-const handleRemove = () => {
|
|
|
- sysIconList.url = '';
|
|
|
- uploadDisabled.value = false;
|
|
|
-
|
|
|
+// 图片预览
|
|
|
+const imageView = () => {
|
|
|
+ imageShow.value=true;
|
|
|
+}
|
|
|
+// 图片下载
|
|
|
+const download = (url:string, name:string) => {
|
|
|
+ let image = new Image();
|
|
|
+ // 解决跨域 Canvas 污染问题
|
|
|
+ image.setAttribute("crossOrigin", "anonymous");
|
|
|
+ image.onload = function () {
|
|
|
+ let canvas = document.createElement("canvas");
|
|
|
+ canvas.width = image.width;
|
|
|
+ canvas.height = image.height;
|
|
|
+ let context: any = canvas.getContext("2d");
|
|
|
+ context.drawImage(image, 0, 0, image.width, image.height);
|
|
|
+ let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
|
|
|
+ let a = document.createElement("a"); // 生成一个a元素
|
|
|
+ let event = new MouseEvent("click"); // 创建一个单击事件
|
|
|
+ a.download = name; // 设置图片名称
|
|
|
+ a.href = url; // 将生成的URL设置为a.href属性
|
|
|
+ a.dispatchEvent(event); // 触发a的单击事件
|
|
|
+ }
|
|
|
+ image.src = url
|
|
|
+}
|
|
|
+// 图片删除
|
|
|
+const deleteImage = () => {
|
|
|
+ companyImgName.value = ''
|
|
|
+ companyImgUrl.value = ''
|
|
|
}
|
|
|
const close = () => {
|
|
|
cpmpanyform.code = '';
|
|
|
@@ -465,7 +518,6 @@ const close = () => {
|
|
|
cpmpanyform.type = '';
|
|
|
cpmpanyform.logo = '';
|
|
|
provinceoptions.value = [];
|
|
|
- sysIconList.url = '';
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
@@ -505,5 +557,59 @@ const close = () => {
|
|
|
.disabled :deep(.el-upload--picture-card) {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
+
|
|
|
+.fileInfo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 2px 20px;
|
|
|
+ margin: 0 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fileName {
|
|
|
+ width: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fileBtn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #00a0f4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.image-view {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgb(0 0 0 / 60%);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 800px;
|
|
|
+ height: 800px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<!-- 样式区域 -->
|
