Skip to content

S
smart_gov_platform
Commit eb0e4ede authored by YIyiyi's avatar YIyiyi
Browse files
Options

pref:修改工作人员照片上传

parent ae4ebbc8
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 39 deletions
base-manager-ui/admin/src/pages/basicset/deploy/deploy.vue
View file @ eb0e4ede
......@@ -522,7 +522,8 @@ export default {
/deep/.ant-card {
width: 100% !important;
}
.svg-box {
.svg-box,
/deep/.ant-upload-list-item-thumbnail {
background-color: #54788c;
}
/deep/.ant-modal-content {
......
base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue
View file @ eb0e4ede
......@@ -653,11 +653,11 @@ export default {
if (!isJpgOrPng) {
this.$message.error("请上传jpeg或者png图片!");
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error("图片大小不能超过2MB!");
const isLt10M = file.size / 1024 / 1024 < 10;
if (!isLt10M) {
this.$message.error("图片大小不能超过10MB!");
}
return isJpgOrPng && isLt2M;
return isJpgOrPng && isLt10M;
},
// 上传图片
handleChange({ fileList }) {
......
base-manager-ui/admin/src/pages/basicset/workman/components/EditPersonel.vue
View file @ eb0e4ede
......@@ -194,6 +194,24 @@
>
<div class="person_image">
<a-upload
name="file"
list-type="picture-card"
class="avatar-uploader"
:file-list="fileList"
:before-upload="beforeUpload"
:action="api + 'base/file/commonupload'"
:accept="accept"
@change="handleChange"
@preview="handlePreview"
>
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">
添加照片
</div>
</div>
</a-upload>
<!-- <a-upload
name="file"
list-type="picture-card"
class="avatar-uploader"
......@@ -213,7 +231,7 @@
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">添加照片</div>
</div>
</a-upload>
</a-upload> -->
<span
>请上传jpg、png、jpeg格式图片 <br />
建议尺寸：250px*350px</span
......@@ -312,12 +330,18 @@
<a-button @click="handleReset">重置</a-button>
<a-button type="primary" @click="hideModal">确定</a-button>
</div>
<!-- 预览 -->
<PrevieModal
:previewData="previewData"
:previewVisible.sync="previewVisible"
></PrevieModal>
</a-modal>
</template>
<script>
import { getWindowList, saveWorkman } from "@/services/dept";
import { modelList } from "@/services/basicsetFun";
import PrevieModal from "@/components/PrevieModal.vue";
// import { changePhone, changeLandline } from "@/utils/validate";
export default {
props: {
......@@ -346,6 +370,9 @@ export default {
},
},
},
components: {
PrevieModal,
},
data() {
const checkIdCard = (rule, value, callback) => {
if (!value) {
......@@ -363,6 +390,9 @@ export default {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
accept: "image/jpeg,image/png", // 上传类型
previewData: {}, // 预览
previewVisible: false,
fileList: [],
loading: false,
imageUrl: "",
labelCol: { span: 5 },
......@@ -485,6 +515,17 @@ export default {
this.form = { ...data };
this.form.loginName && this.$delete(this.form, "loginName");
this.form.loginPwd && this.$delete(this.form, "loginPwd");
if (this.form.photoPath) {
this.fileList = [
{
uid: -1,
status: "done",
name: this.form.photoPath,
url: this.api + this.form.photoPath,
url2: this.form.photoPath,
},
];
}
// this.editWindow(data.deptId);
},
// 关闭对话框
......@@ -498,13 +539,29 @@ export default {
this.$refs.formData.resetFields();
},
// 照片上传
handleChange({ file }) {
this.loading = true;
if (file.status == "done") {
this.form.photoPath = file.response.url;
this.loading = false;
handleChange({ fileList }) {
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api + v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.form.photoPath = this.fileList[0].url2;
} else {
this.form.photoPath = "";
}
},
// 预览
handlePreview(info) {
this.previewData = {
type: "img",
url: info.url,
};
this.previewVisible = true;
},
// 照片大小格式限制
beforeUpload(file) {
const isJpgOrPng =
......@@ -524,10 +581,17 @@ export default {
<style lang="less" scoped>
/deep/.ant-upload,
.avatar-uploader {
/deep/.avatar-uploader {
width: 120px;
height: 170px;
margin-right: 20px;
.ant-upload-list-item {
width: 120px;
height: 170px;
}
.ant-upload-list-item-thumbnail {
object-fit: cover;
}
}
.person_image {
display: flex;
......
base-manager-ui/admin/src/pages/basicset/workman/components/addpersonnel.vue
View file @ eb0e4ede
......@@ -203,14 +203,20 @@
name="file"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:file-list="fileList"
:before-upload="beforeUpload"
:action="api + 'base/file/commonupload'"
:accept="accept"
@change="handleChange"
:remove="handleRemove"
@preview="handlePreview"
>
<img
<div v-if="fileList.length < 1">
<a-icon type="plus" />
<div class="ant-upload-text">
添加照片
</div>
</div>
<!-- <img
v-if="form.photoPath"
class="avatar"
:src="api + form.photoPath"
......@@ -219,7 +225,7 @@
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">添加照片</div>
</div>
</div> -->
</a-upload>
<span
>请上传jpg、png、jpeg格式图片 <br />
......@@ -362,6 +368,11 @@
<a-button @click="handleReset">重置</a-button>
<a-button type="primary" @click="hideModal">确定</a-button>
</div>
<!-- 预览 -->
<PrevieModal
:previewData="previewData"
:previewVisible.sync="previewVisible"
></PrevieModal>
</a-modal>
</template>
......@@ -369,6 +380,7 @@
import { changeAccount, changePassWord } from "@/utils/validate";
import { getWindowList, saveWorkman } from "@/services/dept";
import { modelList } from "@/services/basicsetFun";
import PrevieModal from "@/components/PrevieModal.vue";
// import { changePhone, changeLandline } from "@/utils/validate";
import local from "@/utils/local";
export default {
......@@ -398,6 +410,9 @@ export default {
},
},
},
components: {
PrevieModal,
},
data() {
const checkIdCard = (rule, value, callback) => {
if (!value) {
......@@ -415,6 +430,9 @@ export default {
return {
api: process.env.VUE_APP_API_BASE_URL + "/",
accept: "image/jpeg,image/png", // 上传类型
previewData: {}, // 预览
previewVisible: false,
fileList: [],
loading: false,
imageUrl: "",
labelCol: { span: 5 },
......@@ -551,6 +569,17 @@ export default {
onEdit(data) {
this.form = { ...data };
this.editWindow(data.deptId);
if (this.form.photoPath) {
this.fileList = [
{
uid: -1,
status: "done",
name: this.form.photoPath,
url: this.api + this.form.photoPath,
url2: this.form.photoPath,
},
];
}
},
// 关闭对话框
handleClose() {
......@@ -558,26 +587,31 @@ export default {
this.loading = false;
this.Visible = false;
},
// 照片上传
handleChange({ file }) {
this.loading = true;
if (file.status == "done") {
this.form.photoPath = file.response.url;
this.loading = false;
handleChange({ fileList }) {
this.fileList = [...fileList].slice(-1);
this.fileList = this.fileList.map((v) => {
if (v.response) {
v.url2 = v.response.url;
v.url = this.api + v.response.url;
}
return v;
});
if (this.fileList[0]) {
this.form.photoPath = this.fileList[0].url2;
} else {
this.form.photoPath = "";
}
},
handleRemove() {},
// async uploadImg(info) {
// this.loading = true;
// const formData = new FormData();
// formData.append("file", info.file);
// let res = await uploadFile(formData);
// let { code, url } = res.data;
// if (code === 1) {
// this.form.photoPath = url;
// this.loading = false;
// }
// },
// 预览
handlePreview(info) {
this.previewData = {
type: "img",
url: info.url,
};
this.previewVisible = true;
},
// 照片大小格式限制
beforeUpload(file) {
const isJpgOrPng =
......@@ -597,11 +631,19 @@ export default {
<style lang="less" scoped>
/deep/.ant-upload,
.avatar-uploader {
/deep/.avatar-uploader {
width: 120px;
height: 170px;
margin-right: 20px;
.ant-upload-list-item {
width: 120px;
height: 170px;
}
.ant-upload-list-item-thumbnail {
object-fit: cover;
}
}
.person_image {
display: flex;
align-items: center;
......@@ -609,11 +651,11 @@ export default {
color: #ccc;
}
}
.avatar {
width: 120px;
height: 170px;
.avatar,
/deep/.ant-upload-list-item-thumbnail {
object-fit: cover;
}
/deep/.ant-form-item {
margin-bottom: 15px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment