|
@@ -69,16 +69,16 @@
|
|
|
:title="formTitle[formActionTitle]"
|
|
|
:visible.sync="branchStatus"
|
|
|
@close="onFormClose('ruleForm')"
|
|
|
- width="500px"
|
|
|
+ width="600px"
|
|
|
>
|
|
|
<el-form :model="form" :rules="rules" ref="ruleForm">
|
|
|
- <el-alert
|
|
|
+ <!-- <el-alert
|
|
|
style="margin: 20px 0"
|
|
|
title="分部信息"
|
|
|
:closable="false"
|
|
|
type="info"
|
|
|
>
|
|
|
- </el-alert>
|
|
|
+ </el-alert> -->
|
|
|
<el-form-item
|
|
|
label="分部名称"
|
|
|
prop="name"
|
|
@@ -129,7 +129,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item
|
|
|
label="学年制"
|
|
|
- prop="address"
|
|
|
+ prop="gradeType"
|
|
|
:label-width="formLabelWidth"
|
|
|
>
|
|
|
<el-select
|
|
@@ -168,6 +168,96 @@
|
|
|
placeholder="选择成立时间"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="公司名称"
|
|
|
+ prop="corporateName"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model.trim="form.corporateName"
|
|
|
+ placeholder="请输入公司名称"
|
|
|
+ autocomplete="off"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="营业执照编号"
|
|
|
+ prop="corporateCode"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model.trim="form.corporateCode"
|
|
|
+ placeholder="请输入营业执照编号"
|
|
|
+ autocomplete="off"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="企业公章"
|
|
|
+ prop="corporateSeal"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <div style="width: 300px !important" class="ant-upload-preview">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="/api-web/uploadFile"
|
|
|
+ accept=".png"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="form.corporateSeal"
|
|
|
+ :src="form.corporateSeal"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
+ <span v-else>
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <span class="upload-desc">添加上传图片</span>
|
|
|
+ </span>
|
|
|
+ </el-upload>
|
|
|
+ <div
|
|
|
+ class="tips"
|
|
|
+ style="line-height: 1.3; color: red"
|
|
|
+ >
|
|
|
+ 请上传透明背景PNG格式公章图片;<br />
|
|
|
+ 仅支持图片格式:png,大小:5MB;
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="企业财务公章"
|
|
|
+ prop="corporateFinancialSeal"
|
|
|
+ :label-width="formLabelWidth"
|
|
|
+ >
|
|
|
+ <div style="width: 300px !important" class="ant-upload-preview">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="/api-web/uploadFile"
|
|
|
+ accept=".png"
|
|
|
+ :headers="headers"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess2"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="form.corporateFinancialSeal"
|
|
|
+ :src="form.corporateFinancialSeal"
|
|
|
+ class="avatar"
|
|
|
+ />
|
|
|
+ <span v-else>
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ <span class="upload-desc">添加上传图片</span>
|
|
|
+ </span>
|
|
|
+ </el-upload>
|
|
|
+ <div
|
|
|
+ class="tips"
|
|
|
+ style="line-height: 1.3; color: red"
|
|
|
+ >
|
|
|
+ 请上传透明背景PNG格式公章图片;<br />
|
|
|
+ 仅支持图片格式:png,大小:5MB;
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
<!-- <el-alert
|
|
|
style="margin: 20px 0"
|
|
|
title="分部人员配置"
|
|
@@ -257,6 +347,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
import pagination from "@/components/Pagination/index";
|
|
|
import qrCode from "@/components/QrCode/index";
|
|
|
import {
|
|
@@ -273,6 +364,9 @@ export default {
|
|
|
components: { pagination, qrCode },
|
|
|
data() {
|
|
|
return {
|
|
|
+ headers: {
|
|
|
+ Authorization: getToken(),
|
|
|
+ },
|
|
|
tableList: [],
|
|
|
pageInfo: {
|
|
|
// 分页规则
|
|
@@ -303,6 +397,10 @@ export default {
|
|
|
educationId: [],
|
|
|
repairId: [],
|
|
|
joinTeacherId: [],
|
|
|
+ corporateName: null,
|
|
|
+ corporateCode: null,
|
|
|
+ corporateSeal: null,
|
|
|
+ corporateFinancialSeal: null,
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{ required: true, message: "请输入分部名称", trigger: "blur" }],
|
|
@@ -328,6 +426,28 @@ export default {
|
|
|
this.getAreaList();
|
|
|
},
|
|
|
methods: {
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const imageType = {
|
|
|
+ "image/png": true,
|
|
|
+ };
|
|
|
+ const isImage = imageType[file.type];
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 5;
|
|
|
+ if (!isImage) {
|
|
|
+ this.$message.error("只能上传图片格式!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error("上传头像图片大小不能超过 5MB!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return isImage && isLt2M;
|
|
|
+ },
|
|
|
+ handleAvatarSuccess(res) {
|
|
|
+ this.form.corporateSeal = res.data.url;
|
|
|
+ },
|
|
|
+ handleAvatarSuccess2(res) {
|
|
|
+ this.form.corporateFinancialSeal = res.data.url;
|
|
|
+ },
|
|
|
onBranchSubmit(formName) {
|
|
|
this.$refs[formName].validate((valid) => {
|
|
|
if (!valid) return;
|
|
@@ -445,6 +565,10 @@ export default {
|
|
|
? row.joinTeacherId.split(",")
|
|
|
: [],
|
|
|
educationId: row.educationId ? row.educationId.split(",") : [],
|
|
|
+ corporateName: row.corporateName,
|
|
|
+ corporateCode: row.corporateCode,
|
|
|
+ corporateSeal: row.corporateSeal,
|
|
|
+ corporateFinancialSeal: row.corporateFinancialSeal,
|
|
|
};
|
|
|
});
|
|
|
this.branchStatus = true;
|
|
@@ -464,6 +588,52 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.ant-upload-preview {
|
|
|
+ background-color: #fff;
|
|
|
+ .avatar-uploader {
|
|
|
+ .upload-desc {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 8px;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader .el-upload--text {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader.uploadDisabled {
|
|
|
+ .el-upload--text {
|
|
|
+ cursor: not-allowed;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ .el-upload:hover {
|
|
|
+ border-color: #d9d9d9;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+::v-deep .avatar-uploader-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #ccc;
|
|
|
+ width: 108px;
|
|
|
+ height: 108px;
|
|
|
+ line-height: 108px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+::v-deep.avatar {
|
|
|
+ width: 108px;
|
|
|
+ height: 108px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
/deep/.el-date-editor.el-input {
|
|
|
width: 100% !important;
|
|
|
}
|