|
|
<template> <div class="content"> <div class="card1"> <el-card style="margin-bottom: 0.5vh; min-height: 110px;"> <div class="row"> <div class="rowItem"> <el-text style="width: 4vw;">精网号</el-text> <el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input> </div> <div class="rowItem"> <el-text style="width: 4vw;">客户姓名</el-text> <el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input> </div> <div class="rowItem"> <el-text style="width: 4vw;">所属地区</el-text> <el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select> </div> <div class="rowItem"> <el-text style="width: 4vw;">订单状态</el-text> <el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select> </div> <div class="rowItem"> <el-text style="width: 4vw;">支付方式</el-text> <el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select> </div> </div> <div class="row" style="margin-top: 10px;"> <div class="rowItem"> <el-text style="width: 4vw;">活动名称</el-text> <el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select> </div> <div class="rowItem"> <el-text style="width: 4vw;">产品名称</el-text> <el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select> </div> <div class="rowItem" style="width: 30vw"> <el-text style="width: 4vw; margin-left: 0.5vw;">付款时间</el-text> <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; " @change="handleDatePickerChange" :default-time="defaultTime" :disabled-date="disabledDate" /> </div> </div> <div class="row" style="margin-top: 10px;"> <div class="buttons"> <el-button type="primary">查询</el-button> <el-button type="success">重置</el-button> <el-button type="primary">导出excel</el-button> <el-button type="primary" style="background-color: #5870FF;">导出列表</el-button> <el-button type="primary" @click="checkKefu">切换客服</el-button> <el-button type="success" @click="checkCaiwu">切换财务</el-button> </div> </div> </el-card> </div>
<div class="card2"> <el-card> <div class="btns"> <div class="tabs" v-if="caiwu"> <el-button-group> <el-button class="btnItem" :style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }" @click="navigateTo('wait')"> 待审核 </el-button> <el-button class="btnItem" :style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }" @click="navigateTo('pass')"> 已通过 </el-button> <el-button class="btnItem" :style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }" @click="navigateTo('reject')"> 已驳回 </el-button> </el-button-group> </div> <div class="btnAdd"> <el-button @click="openAddForm" type="success" v-if="kefu">添加收款</el-button> </div> </div>
<div class="table"> <el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange" :row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <el-table-column type="index" label="序号" width="100px" fixed="left"> <template #default="scope"> <span>{{ scope.$index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize }}</span> </template> </el-table-column> <el-table-column fixed="left" prop="jwcode" label="Homily ID" width="110px" /> <el-table-column fixed="left" prop="name" label="姓名" width="110px" /> <el-table-column prop="market" label="所属地区" width="80px" /> <el-table-column prop="activity" label="活动名称" width="120px" /> <el-table-column prop="rateName" label="产品名称" width="120px" /> <el-table-column prop="money" label="付款币种" width="100px"> </el-table-column> <el-table-column prop="permanentGold" label="付款金额" width="120px"> </el-table-column> <el-table-column prop="moneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'" width="150px" ></el-table-column> <el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px" > <template #default="scope"> <div v-if="!scope.row.getMoney"> <text style="color: #FA5A1E;">待补充</text> </div> </template> </el-table-column> <el-table-column prop="shouxufei" label="手续费" v-if="caiwu && activeTab == 'pass'" width="150px" > <template #default="scope"> <div v-if="!scope.row.shouxufei"> <text style="color: #FA5A1E;">待补充</text> </div> </template> </el-table-column> <el-table-column prop="pastType" label="支付方式" width="110px"> </el-table-column> <el-table-column prop="remark" label="付款时间" width="100px" /> <el-table-column prop="payModel" label="转账凭证" width="110px"> <template #default="scope"> <div v-if="scope.row.voucher" style="display: flex; justify-content: center; align-items: center; cursor: pointer;" @click="previewImage(scope.row.voucher)"> <img :src="scope.row.payModel" alt="支付凭证" style="width: auto; height: 40px;"> </div> <div v-else style="display: flex; justify-content: center; align-items: center; height: 40px;"> -- </div> </template> </el-table-column> <el-table-column prop="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column> <el-table-column prop="submiter" label="提交人" width="150px" show-overflow-tooltip></el-table-column> <el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column> <el-table-column prop="mask" label="备注" width="150px" show-overflow-tooltip></el-table-column> <el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip> </el-table-column> <el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" /> <el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'"> <template #default=scope> <span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span> <span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;">编辑</span> <span v-else-if="kefu && scope.row.orderStatus == '待审核'" style="color: #FA5A1E;">撤回</span> <span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;" @click="openAuditForm">审核</span> <span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;" @click="openEditForm(scope.row)">编辑</span> </template> </el-table-column> </el-table> </div> <div class="pagination"> <el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePagination('size', $event)" @current-change="handlePagination('page', $event)"></el-pagination> </div> </el-card> </div> <el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm"> <el-form class="addForm" label-width="4vw" label-position="left"> <el-form-item label="精网号" required> <el-input v-model="addFormData.jwcode" placeholder="请输入驳回理由" /> </el-form-item> <el-form-item label="客户姓名" required> <el-input v-model="addFormData.userName" placeholder="请输入客户姓名" /> </el-form-item> <el-form-item label="所属地区" required> <el-input disabled="true" v-model="addFormData.market" placeholder="请输入所属地区" /> </el-form-item> <el-form-item label="活动名称" required> <el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" /> </el-form-item> <el-form-item label="产品名称" required> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="付款币种" required> <el-select placeholder="请选择付款币种" clearable></el-select> </el-form-item> <el-form-item label="付款金额" required> <el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" /> </el-form-item> <el-form-item label="支付方式" required> <el-select placeholder="请选择支付方式" clearable></el-select> </el-form-item> <el-form-item label="付款时间" required> <el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" /> </el-form-item> <el-form-item label="转账凭证" required> <el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload"> <img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar" style="height: 100%; width: 100%; object-fit: cover;" /> <el-icon v-else class="avatar-uploader-icon"> <Plus /> </el-icon> </el-upload> </el-form-item> <el-form-item label="备注" required> <el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入备注" maxlength="100" show-word-limit /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button> <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button> </span> </template> </el-dialog> <!-- 审核弹窗 --> <el-dialog class="adddialog" v-model="auditFormisible" width="20vw" :before-close="closeAuditForm"> <el-form class="addForm" label-width="4vw" label-position="left"> <el-form-item label="精网号"> <el-input v-model="auditFormData.jwcode" placeholder="请输入驳回理由" /> </el-form-item> <el-form-item label="客户姓名"> <el-input v-model="auditFormData.userName" placeholder="请输入客户姓名" /> </el-form-item> <el-form-item label="所属地区"> <el-input disabled="true" v-model="auditFormData.market" /> </el-form-item> <el-form-item label="活动名称"> <el-input v-model="auditFormData.jwcode" placeholder="请输入活动名称" /> </el-form-item> <el-form-item label="产品名称"> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="付款币种"> <el-select placeholder="请选择付款币种" clearable></el-select> </el-form-item> <el-form-item label="付款金额"> <el-input v-model="auditFormData.jwcode" placeholder="请输入付款金额" /> </el-form-item> <el-form-item label="支付方式"> <el-select placeholder="请选择支付方式" clearable></el-select> </el-form-item> <el-form-item label="付款时间"> <el-time-picker v-model="auditFormData.time" placeholder="请选择付款时间" /> </el-form-item> <el-form-item label="转账凭证"> <div class="pic"> <el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload"> <img v-if="auditFormData.imageUrl" :src="auditFormData.imageUrl" class="avatar" style="height: 100%; width: 100%; object-fit: cover;" /> <el-icon v-else class="avatar-uploader-icon"> <Plus /> </el-icon> </el-upload> <el-text class="picText"> 仅支持.jpg .png格式文件≤ 1 MB </el-text> </div> </el-form-item> <el-form-item label="备注"> <el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入备注" maxlength="100" show-word-limit /> </el-form-item> <el-form-item label="驳回理由" v-if="ifReject" required> <el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入驳回理由" maxlength="100" show-word-limit /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer" v-if="!ifReject"> <el-button style="background-color: #7E91FF;" @click="ifReject = true">驳回</el-button> <el-button :style="{ backgroundColor: isBtnDisabled ? '#E5E5E5FF' : '#2741DEFF', marginLeft: '60px', color: isBtnDisabled ? '#8A8A8A' : '#F3FAFE' }" @click="handleReject" :disabled="isBtnDisabled">{{ btnText }}</el-button> </span> <span class="dialog-footer" v-if="ifReject"> <el-button style="background-color: #7E91FF;" @click="closeAuditForm">取消</el-button> <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button> </span> </template> </el-dialog> <!-- 编辑弹窗 --> <el-dialog class="editdialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm"> <div class="content"> <div class="left"> <el-form class="editForm" label-width="4.5vw" label-position="left"> <el-form-item label="精网号"> <el-input v-model="editFormData.jwcode" placeholder="请输入驳回理由" /> </el-form-item> <el-form-item label="客户姓名"> <el-input v-model="editFormData.userName" placeholder="请输入客户姓名" /> </el-form-item> <el-form-item label="所属地区"> <el-input disabled="true" v-model="editFormData.market" placeholder="请输入所属地区" /> </el-form-item> <el-form-item label="活动名称"> <el-input v-model="editFormData.jwcode" placeholder="请输入活动名称" /> </el-form-item> <el-form-item label="产品名称"> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="付款币种"> <el-select placeholder="请选择付款币种" clearable></el-select> </el-form-item> <el-form-item label="付款金额"> <el-input v-model="editFormData.jwcode" placeholder="请输入付款金额" /> </el-form-item> <el-form-item label="支付方式"> <el-select placeholder="请选择支付方式" clearable></el-select> </el-form-item> <el-form-item label="付款时间"> <el-time-picker v-model="editFormData.time" placeholder="请选择付款时间" /> </el-form-item> <el-form-item label="转账凭证"> <div class="pic"> <el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload"> <img v-if="editFormData.imageUrl" :src="editFormData.imageUrl" class="avatar" style="height: 100%; width: 100%; object-fit: cover;" /> <el-icon v-else class="avatar-uploader-icon"> <Plus /> </el-icon> </el-upload> <el-text class="picText"> 仅支持.jpg .png格式文件≤ 1 MB </el-text> </div> </el-form-item> <el-form-item label="驳回理由"> <el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="100" show-word-limit /> </el-form-item> </el-form> </div> <div class="right"> <el-form class="editFormRighrt" label-width="4.5vw" label-position="left"> <el-form-item label="到账货币"> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="到账金额"> <el-input v-model="addFormData.userName" placeholder="请输入到账金额" /> </el-form-item> <el-form-item label="手续费"> <el-input disabled="true" v-model="addFormData.market" placeholder="请输入手续费" /> </el-form-item> <el-form-item label="银行流水订单号"> <el-input v-model="addFormData.jwcode" placeholder="请输入银行流水订单号" /> </el-form-item> <el-form-item label="到账时间"> <el-input v-model="addFormData.jwcode" placeholder="请输入到账时间" /> </el-form-item> </el-form> <span class="editBtns"> <button class="editBtn1"> <text class="txt"> 取消 </text> </button> <button class="editBtn2"> <text class="txt"> 提交 </text> </button> </span> </div> </div> </el-dialog> </div></template><script setup>import { ref, watch } from 'vue';import { ElMessage } from 'element-plus'import API from '@/util/http.js'import { color } from 'echarts';import { template } from 'lodash';
//==================== 标签切换 =========================
const activeTab = ref('wait')
const navigateTo = (tab) => { if (tab === 'wait') { activeTab.value = 'wait' } else if (tab === 'pass') { activeTab.value = 'pass' } else if (tab === 'reject') { activeTab.value = 'reject' }}
const kefu = ref(true)const caiwu = ref(true)const checkKefu = () => { kefu.value = true caiwu.value = false}const checkCaiwu = () => { kefu.value = false caiwu.value = true}//================= 客服新增弹窗 ==================
const addFormData = ref({
})const addFormisible = ref(false)
const uploadRef = ref()const openAddForm = () => { addFormisible.value = true}const closeAddForm = () => { addFormisible.value = false addFormData.value = {}}
const handleImgSuccess = (response, uploadFile) => { try { console.log('11', response) addFormData.value.imageUrl = response.data.url console.log('22', response.data.url) } catch (error) { console.log('报错信息', error) ElMessage.error(response.msg || '图片上传失败') }}
const handelImgErr = (err) => { console.log(err); addFormData.value.imageUrl = null ElMessage.error("图片上传失败")}const beforeUpload = (rawFile) => { if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') { ElMessage.error('图片必须是jpg或png类型!') return false } else if (rawFile.size / 1024 / 1024 > 1) { ElMessage.error('图片大小不能超过 1MB!') return false } return true}const handleImageChange = (file) => { uploadRef.value.submit()}
const customUpload = async (options) => { try { const formData = new FormData() formData.append('file', options.file)
const response = await API({ url: 'https://api.homilychart.com/hljw/api/aws/upload', method: 'POST', data: formData, headers: { 'Content-Type': 'multipart/form-data' } }) if (response.code === 100 && response.data) { handleImgSuccess(response, options.file) ElMessage.success(response.msg || '上传成功') } else { options.onError(response) ElMessage.error(response.msg || '上传失败') } } catch (error) { console.error('上传错误:', error) ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) }}
//================== 财务编辑相关 =========================
const editFormData = ref({
})const editFormisible = ref(false)const openEditForm = (row) => { console.log('编辑时该行数据：',row); editFormData.value = row editFormisible.value = true}const closeEditForm = () => { editFormisible.value = false editFormData.value = {}}//================== 审核相关 =========================
const auditFormData = ref({
})const auditFormisible = ref(false)//判断弹窗中是否展示驳回
const ifReject = ref(false)const openAuditForm = () => { auditFormisible.value = true}const countdown = ref(0); // 倒计时秒数（示例设为 5 秒）
const isBtnDisabled = ref(false); // 按钮是否禁用
const btnText = ref('通过(3)'); // 按钮显示的文字（含倒计时）
const closeAuditForm = () => { ifReject.value = false auditFormisible.value = false auditFormData.value = {}}//倒计时控制通过按钮
watch(auditFormisible, (val) => { if (val) { countdown.value = 3 isBtnDisabled.value = true btnText.value = `通过(${countdown.value})`
const timer = setInterval(() => { countdown.value-- btnText.value = `通过(${countdown.value})` console.log(btnText.value);
if (countdown.value <= 0) { isBtnDisabled.value = false clearInterval(timer) btnText.value = '通过' } }, 1000); }
})//========================分页相关==================
const pageInfo = ref({ pageSize: 10, pageNum: 1})
const total = ref(0)const tableData = [ { "jwcode": "HM2024001", "name": "张三", "market": "华东区", "activity": "2024春季促销活动", "rateName": "年度会员套餐A", "money": "人民币", "permanentGold": 2980.00, "moneyType": "人民币", "getMoney": 2980.00, "shouxufei": 59.60, "pastType": "支付宝转账", "remark": "2024-05-10 09:23", "voucher": "https://example.com/voucher/1.jpg", "payModel": "https://example.com/icon/alipay.png", "bankOrder": "ALIPAY2024051000001", "submiter": "李四（运营部）", "auditor": "王五（财务部）", "mask": "客户主动购买，无特殊备注", "getMoneyTime": "2024-05-10 10:05", "orderStatus": "已通过" }, { "jwcode": "HM2024002", "name": "李四", "market": "华北区", "activity": "新客首单优惠", "rateName": "季度体验套餐B", "money": "美元", "permanentGold": 99.00, "moneyType": "人民币", "getMoney": 712.00, "shouxufei": 14.24, "pastType": "PayPal", "remark": "2024-05-11 14:56", "voucher": "https://example.com/voucher/2.jpg", "payModel": "https://example.com/icon/paypal.png", "bankOrder": "PAYPAL2024051100002", "submiter": "赵六（国际部）", "auditor": "孙七（财务部）", "mask": "跨境支付，汇率按当日中间价计算", "getMoneyTime": "2024-05-12 08:30", "orderStatus": "待审核" }, { "jwcode": "HM2024003", "name": "王五", "market": "华南区", "activity": "老客召回活动", "rateName": "月度续费套餐C", "money": "人民币", "permanentGold": 399.00, "moneyType": "人民币", "getMoney": null, "shouxufei": null, "pastType": "微信支付", "remark": "2024-05-12 11:18", "voucher": "https://example.com/voucher/3.jpg", "payModel": "https://example.com/icon/wechat.png", "bankOrder": "WECHAT2024051200003", "submiter": "钱八（客服部）", "auditor": null, "mask": "到账信息待财务补充", "getMoneyTime": null, "orderStatus": "已撤回" }, { "jwcode": "HM2024004", "name": "赵六", "market": "西区", "activity": "企业团购活动", "rateName": "企业定制套餐D", "money": "人民币", "permanentGold": 15800.00, "moneyType": "人民币", "getMoney": 15800.00, "shouxufei": 316.00, "pastType": "银行对公转账", "remark": "2024-05-13 09:45", "voucher": "https://example.com/voucher/4.jpg", "payModel": "https://example.com/icon/bank.png", "bankOrder": "BANK2024051300004", "submiter": "周九（销售部）", "auditor": "吴十（财务部）", "mask": "10人企业团单，享受95折优惠", "getMoneyTime": "2024-05-13 11:20", "orderStatus": "已通过" }, { "jwcode": "HM2024005", "name": "孙七", "market": "东北区", "activity": "节日特惠活动", "rateName": "年度会员套餐A", "money": "人民币", "permanentGold": 2780.00, "moneyType": "人民币", "getMoney": 2780.00, "shouxufei": 55.60, "pastType": "银联支付", "remark": "2024-05-14 15:30", "voucher": null, "payModel": null, "bankOrder": "UNIONPAY2024051400005", "submiter": "郑一（市场部）", "auditor": "王二（财务部）", "mask": "凭证暂未上传，已提醒客户补充", "getMoneyTime": "2024-05-14 16:45", "orderStatus": "待审核" }]</script><style scoped lang="scss">.content { //整体内容
height: 100%; width: 83vw;
.card1 { // 筛选框
width: 100%;
.row { height: 4vh; width: 80vw; display: flex; min-height: 40px;
.rowItem { display: flex; width: 15vw; align-items: center; justify-content: center; margin-right: 0.5vw; }
.buttons { display: flex; justify-content: center; align-items: center; margin-left: 10px; } } }
.card2 { // 下方数据展示card
width: 100%;
margin-top: 2vh;
.btns { //切换标签
display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;
.tabs { min-width: 300px;
.btnItem { margin-left: 10px; border-radius: 5px; } }
.btnAdd { margin-right: 5vw; padding-left: 10px; } }
.table { margin: 10px 3vw; border-radius: 20px; }
.pagination { margin-top: 10px; padding: 10px 10px; } }
:deep(.adddialog) { //客服新增弹窗
min-width: 500px; background-color: #F3FAFE !important; margin-top: 8vh; border-radius: 8px;
.addForm { padding: 0 60px 1vh 60px;
.el-date-editor { display: flex; flex: 1;
}
.pic { display: flex; align-items: center;
.uploader { height: 80px; width: 80px;
.el-upload { height: 100%; width: 100%; } }
.picText { color: #999999; font-family: "PingFang SC"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 20px; margin-left: 10px; } }
}
.dialog-footer { display: flex; justify-content: center; padding-bottom: 1.5vh; } }
:deep(.editdialog) { //编辑弹窗
min-width: 990px; background-color: #F3FAFE !important; margin-top: 8vh; border-radius: 8px;
.editForm { padding: 0 60px 1vh 60px;
.el-date-editor { display: flex; flex: 1; }
.pic { display: flex; align-items: center;
.uploader { height: 80px; width: 80px;
.el-upload { height: 100%; width: 100%; } }
.picText { color: #999999; font-family: "PingFang SC"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 20px; margin-left: 10px; } }
}
.content { //编辑弹窗内容
display: flex; height: 100%; width: 100%;
.left { min-width: 500px; }
.right { flex: 1;
.editFormRighrt { padding: 0 60px 0 40px;
.el-date-editor { display: flex; flex: 1; }
.pic { display: flex; align-items: center;
.uploader { height: 80px; width: 80px;
.el-upload { height: 100%; width: 100%; } }
.picText { color: #999999; font-family: "PingFang SC"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 20px; margin-left: 10px; } } }
.editBtns { display: flex; justify-content: center; margin-top: 60px;
.txt { color: #f3fafe; text-align: center; font-family: "PingFang SC"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 22px; }
.editBtn1 { min-width: 80px; padding: 5px 12px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: #7E91FF; border: none; box-shadow: 0 0 4px 0 #00000040; }
.editBtn2 { display: flex; width: 80px; min-width: 80px; padding: 5px 12px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: #2741DE; border: none; box-shadow: 0 0 4px 0 #00000040; margin-left: 60px; } }
} }
}
:deep(.adddialog .el-form-item__label) { //设置新增弹窗表头
min-width: 80px; width: auto; font-weight: 800; padding-bottom: 15px; }}</style>
|
