|
|
@@ -49,13 +49,131 @@
|
|
|
<el-col :span="6">
|
|
|
<el-form-item label-width="0" prop="departmentId" style="width: 100%">
|
|
|
<el-select v-model="formData.data.departmentId" placeholder="请选择事业部" clearable style="width: 100%">
|
|
|
- <!-- <el-option v-for="item in useUserStore().allDict['processing_layout']" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" /> -->
|
|
|
+ <el-option v-for="item in departmentList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <template #orderSkuList>
|
|
|
+ <div style="width: 100%; padding: 0 20px">
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <el-button type="primary" size="small" @click="clickAddProduct()">选择产品</el-button>
|
|
|
+ </div>
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <div v-for="(item, index) in formData.data.orderSkuList" :key="index" style="margin-bottom: 20px">
|
|
|
+ <div style="border: 1px solid #edf0f5">
|
|
|
+ <el-table :data="[item]" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
|
|
|
+ <el-table-column label="产品" width="300">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div style="width: 100%">
|
|
|
+ <div style="line-height: 28px">品号: {{ item.code }}</div>
|
|
|
+ <div style="line-height: 28px; word-break: break-all">品名: {{ item.name }}</div>
|
|
|
+ <div style="line-height: 28px; display: flex">
|
|
|
+ <span style="width: 37px">数量:</span>
|
|
|
+ <el-form-item
|
|
|
+ :prop="'orderSkuList.' + $index + '.quantity'"
|
|
|
+ :rules="rules.quantity"
|
|
|
+ :inline-message="true"
|
|
|
+ style="width: calc(100% - 37px)">
|
|
|
+ <el-input-number
|
|
|
+ onmousewheel="return false;"
|
|
|
+ v-model="row.quantity"
|
|
|
+ placeholder="数量"
|
|
|
+ style="width: 100%"
|
|
|
+ :controls="false"
|
|
|
+ :min="0"
|
|
|
+ :precision="0" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div style="line-height: 28px">加工费: {{ item.customProcessingFee }}</div>
|
|
|
+ <div style="line-height: 28px">代发费: {{ item.lssueFee }}</div>
|
|
|
+ <div style="line-height: 28px">快递包材费: {{ item.deliveryMaterialsFee }}</div>
|
|
|
+ <div style="line-height: 28px">包装人工费: {{ item.packingLabor }}</div>
|
|
|
+ <div style="line-height: 28px">单价: ¥{{ item.unitPrice }}</div>
|
|
|
+ <div style="line-height: 28px">小计: ¥{{ item.subtotal }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="图稿（设计图）" width="180">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="'orderSkuList.' + $index + '.productImgUrl'">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
+ :data="uploadData"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="
|
|
|
+ (response, uploadFile) => {
|
|
|
+ return handleSuccess(uploadFile, $index);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :before-upload="uploadFile">
|
|
|
+ <el-image v-if="row.productImgUrl" :src="row.productImgUrl" fit="scale-down" class="avatar" />
|
|
|
+ <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="图稿（生产文件）" width="280" />
|
|
|
+ <el-table-column label="包材配件/单品" min-width="400">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <div>{{ row }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" fixed="right" width="60">
|
|
|
+ <template #default="{ $index }">
|
|
|
+ <el-button type="primary" @click="clickDelete($index)" text>删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-collapse-item :name="index">
|
|
|
+ <template #title>
|
|
|
+ <span>包装</span>
|
|
|
+ </template>
|
|
|
+ <div style="display: flex; padding: 8px 10px 0px">
|
|
|
+ <div style="flex: 1; padding: 0px 10px">
|
|
|
+ <div>包装要求:</div>
|
|
|
+ <Editor
|
|
|
+ :value="item.packageRemark"
|
|
|
+ @updateValue="
|
|
|
+ (val) => {
|
|
|
+ return updatePackageRemark(val, index);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ :ref="'editor' + index" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <el-collapse-item title="Consistency" name="1">
|
|
|
+ <div>
|
|
|
+ Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
|
|
|
+ </div>
|
|
|
+ <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="Feedback" name="2">
|
|
|
+ <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
|
|
|
+ <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="Efficiency" name="3">
|
|
|
+ <div>Simplify the process: keep operating process simple and intuitive;</div>
|
|
|
+ <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
|
|
|
+ <div>
|
|
|
+ Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ <el-collapse-item title="Controllability" name="4">
|
|
|
+ <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
|
|
|
+ <div>
|
|
|
+ Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
|
|
|
+ </div>
|
|
|
+ </el-collapse-item> -->
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<template #deliveryTime>
|
|
|
<div style="width: 100%">
|
|
|
<el-date-picker
|
|
|
@@ -84,104 +202,29 @@
|
|
|
<template #attachments>
|
|
|
<div style="width: 100%"></div>
|
|
|
</template>
|
|
|
- <!-- <template #skuClassifyId>
|
|
|
- <div style="width: 100%">
|
|
|
- <el-cascader
|
|
|
- v-model="formData.data.skuClassifyId"
|
|
|
- :options="classifyList"
|
|
|
- :props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
|
|
|
- clearable
|
|
|
- style="width: 100%" />
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #specification>
|
|
|
- <div style="width: 100%">
|
|
|
- <div>
|
|
|
- <el-icon style="cursor: pointer; transform: translateY(4px); font-size: 24px; margin-left: 10px" @click="addSpecification"><Plus /></el-icon>
|
|
|
- </div>
|
|
|
- <el-table :data="formData.data.orderSkuList" :row-style="{ height: '35px' }" header-row-class-name="tableHeader">
|
|
|
- <el-table-column label="规格图" align="center" width="100">
|
|
|
- <template #default="{ row, $index }">
|
|
|
- <el-form-item :prop="'orderSkuList.' + $index + '.specImgUrl'">
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader"
|
|
|
- action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
- :data="uploadData"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="
|
|
|
- (response, uploadFile) => {
|
|
|
- return handleSuccess(uploadFile, $index);
|
|
|
- }
|
|
|
- "
|
|
|
- :before-upload="uploadFile">
|
|
|
- <el-image v-if="row.specImgUrl" :src="row.specImgUrl" fit="scale-down" class="avatar" />
|
|
|
- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="BOM" align="left" width="250">
|
|
|
- <template #default="{ row, $index }">
|
|
|
- <el-button
|
|
|
- v-if="!row.bomSpecId"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="handleOpen($index)"
|
|
|
- style="margin: 5px 0; background-color: #43b214; border-color: #43b214">
|
|
|
- 选择BOM
|
|
|
- </el-button>
|
|
|
- <div style="width: 100%; display: flex; align-items: center" v-else>
|
|
|
- <el-icon style="font-size: 16px; cursor: pointer" @click="clickRemoveBOM($index)"><Remove /></el-icon>
|
|
|
- <span>{{ row.bomSpecName }}</span>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" align="center" fixed="right" width="60">
|
|
|
- <template #default="{ $index }">
|
|
|
- <el-button type="primary" @click="clickDelete($index)" text>删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template #mainImgUrl>
|
|
|
- <div style="width: 100%">
|
|
|
- <div style="color: #aaaaaa">图片不超过5M,支持JPEG、JPG、PNG格式;</div>
|
|
|
- <div style="color: #aaaaaa">建议主图大于640*640,主题鲜明、图片清晰、提升买家满意度;</div>
|
|
|
- <el-upload
|
|
|
- class="avatar-uploader-main"
|
|
|
- action="https://winfaster.obs.cn-south-1.myhuaweicloud.com"
|
|
|
- :data="uploadMainData"
|
|
|
- :show-file-list="false"
|
|
|
- :on-success="handleMainSuccess"
|
|
|
- :before-upload="uploadMainFile">
|
|
|
- <el-image v-if="formData.data.mainImgUrl" :src="formData.data.mainImgUrl" fit="scale-down" class="avatar" />
|
|
|
- <el-icon v-else class="avatar-uploader-main-icon"><Plus /></el-icon>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
- </template> -->
|
|
|
<template #remark>
|
|
|
<div style="width: 100%">
|
|
|
- <!-- <div v-if="props.detailStatus">
|
|
|
+ <div v-if="route.query && route.query.id">
|
|
|
<div v-html="getStyle(formData.data.remark)"></div>
|
|
|
- </div> -->
|
|
|
- <Editor :value="formData.data.remark" @updateValue="updateValue" ref="editor" />
|
|
|
+ </div>
|
|
|
+ <Editor v-else :value="formData.data.remark" @updateValue="updateValue" ref="editor" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</byForm>
|
|
|
<div style="width: 100%; text-align: center; margin: 10px">
|
|
|
- <!-- <el-button @click="clickCancel()" size="large">关 闭</el-button> -->
|
|
|
<el-button @click="clickCancel()" size="large">取 消</el-button>
|
|
|
<el-button type="primary" @click="submitForm()" :disabled="btnDisabled" size="large">确 定</el-button>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
-
|
|
|
- <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="84%">
|
|
|
- <!-- <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM> -->
|
|
|
+
|
|
|
+ <el-dialog title="选择产品" v-if="openProduct" v-model="openProduct" width="84%">
|
|
|
+ <SelectProduct :selectStatus="true" @selectProduct="selectProduct"></SelectProduct>
|
|
|
<template #footer>
|
|
|
- <el-button @click="openBOM = false" size="large">关 闭</el-button>
|
|
|
+ <el-button @click="openProduct = false" size="large">关 闭</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -189,11 +232,17 @@
|
|
|
import byForm from "@/components/byForm/index";
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import Editor from "@/components/Editor/index.vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import useTagsViewStore from "@/store/modules/tagsView.js";
|
|
|
+import SelectProduct from "@/views/group/product/management/index";
|
|
|
// import SelectBOM from "@/views/group/BOM/management/index";
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
-const emit = defineEmits(["clickCancel"]);
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
const submit = ref(null);
|
|
|
+const departmentList = ref([]);
|
|
|
+const activeNames = ref([]);
|
|
|
const formOption = reactive({
|
|
|
inline: true,
|
|
|
labelWidth: "120px",
|
|
|
@@ -230,6 +279,11 @@ const formConfig = computed(() => {
|
|
|
label: "",
|
|
|
},
|
|
|
{
|
|
|
+ type: "slot",
|
|
|
+ prop: "orderSkuList",
|
|
|
+ slotName: "orderSkuList",
|
|
|
+ },
|
|
|
+ {
|
|
|
type: "title",
|
|
|
title: "贸易",
|
|
|
label: "",
|
|
|
@@ -296,50 +350,21 @@ const rules = ref({
|
|
|
deliveryTime: [{ required: true, message: "请选择交货时间", trigger: "change" }],
|
|
|
// expressDeliveryId: [{ required: true, message: "请选择快递", trigger: "change" }],
|
|
|
commercePlatform: [{ required: true, message: "请选择电商平台", trigger: "change" }],
|
|
|
+ quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
|
|
|
});
|
|
|
-const addSpecification = () => {
|
|
|
- // if (!props.detailStatus) {
|
|
|
- // if (formData.data.orderSkuList && formData.data.orderSkuList.length > 0) {
|
|
|
- // formData.data.orderSkuList.push({
|
|
|
- // specImgUrl: "",
|
|
|
- // designImgUrl: "",
|
|
|
- // name: "",
|
|
|
- // code: "",
|
|
|
- // barCode: "",
|
|
|
- // machinedPanel: "",
|
|
|
- // length: undefined,
|
|
|
- // width: undefined,
|
|
|
- // height: undefined,
|
|
|
- // netWeight: undefined,
|
|
|
- // sharedFolder: "",
|
|
|
- // bomSpecId: "",
|
|
|
- // remark: "",
|
|
|
- // packagingMaterialList: [],
|
|
|
- // expressPackingList: [],
|
|
|
- // });
|
|
|
- // } else {
|
|
|
- // formData.data.orderSkuList = [
|
|
|
- // {
|
|
|
- // specImgUrl: "",
|
|
|
- // name: "",
|
|
|
- // code: "",
|
|
|
- // designImgUrl: "",
|
|
|
- // barCode: "",
|
|
|
- // machinedPanel: "",
|
|
|
- // length: undefined,
|
|
|
- // width: undefined,
|
|
|
- // height: undefined,
|
|
|
- // netWeight: undefined,
|
|
|
- // sharedFolder: "",
|
|
|
- // bomSpecId: "",
|
|
|
- // remark: "",
|
|
|
- // packagingMaterialList: [],
|
|
|
- // expressPackingList: [],
|
|
|
- // },
|
|
|
- // ];
|
|
|
- // }
|
|
|
- // }
|
|
|
+const getDepartment = () => {
|
|
|
+ proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
|
|
|
+ if (res.rows && res.rows.length > 0) {
|
|
|
+ departmentList.value = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ dictKey: item.id,
|
|
|
+ dictValue: item.name,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
};
|
|
|
+getDepartment();
|
|
|
const uploadData = ref({});
|
|
|
const uploadFile = async (file) => {
|
|
|
const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
|
|
|
@@ -350,27 +375,17 @@ const uploadFile = async (file) => {
|
|
|
return true;
|
|
|
};
|
|
|
const handleSuccess = (uploadFile, index) => {
|
|
|
- formData.data.orderSkuList[index].specImgUrl = uploadFile.raw.fileUrl;
|
|
|
+ formData.data.orderSkuList[index].productImgUrl = uploadFile.raw.fileUrl;
|
|
|
+};
|
|
|
+const updatePackageRemark = (val, index) => {
|
|
|
+ formData.data.orderSkuList[index].packageRemark = val;
|
|
|
};
|
|
|
const clickDelete = (index) => {
|
|
|
formData.data.orderSkuList.splice(index, 1);
|
|
|
};
|
|
|
-const editor = ref(null);
|
|
|
const updateValue = (val) => {
|
|
|
formData.data.remark = val;
|
|
|
};
|
|
|
-const uploadMainData = ref({});
|
|
|
-const uploadMainFile = async (file) => {
|
|
|
- const res = await proxy.post("/fileInfo/getSing", { fileName: file.name });
|
|
|
- uploadMainData.value = res.uploadBody;
|
|
|
- file.id = res.id;
|
|
|
- file.fileName = res.fileName;
|
|
|
- file.fileUrl = res.fileUrl;
|
|
|
- return true;
|
|
|
-};
|
|
|
-const handleMainSuccess = (response, uploadFile) => {
|
|
|
- formData.data.mainImgUrl = uploadFile.raw.fileUrl;
|
|
|
-};
|
|
|
const btnDisabled = ref(false);
|
|
|
const submitForm = () => {
|
|
|
console.log(formData.data);
|
|
|
@@ -387,7 +402,7 @@ const submitForm = () => {
|
|
|
message: type == "add" ? "添加成功" : "编辑成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
- emit("clickCancel", true);
|
|
|
+ clickCancel();
|
|
|
},
|
|
|
(err) => {
|
|
|
console.log(err);
|
|
|
@@ -400,12 +415,12 @@ const submitForm = () => {
|
|
|
});
|
|
|
};
|
|
|
const clickCancel = () => {
|
|
|
- emit("clickCancel", false);
|
|
|
+ const useTagsStore = useTagsViewStore();
|
|
|
+ useTagsStore.delVisitedView(router.currentRoute.value);
|
|
|
+ router.replace({
|
|
|
+ path: "/group/order/order-management",
|
|
|
+ });
|
|
|
};
|
|
|
-// const props = defineProps({
|
|
|
-// rowData: Object,
|
|
|
-// detailStatus: Boolean,
|
|
|
-// });
|
|
|
onMounted(() => {
|
|
|
// formOption.disabled = props.detailStatus;
|
|
|
// if (props.rowData && props.rowData.id) {
|
|
|
@@ -414,7 +429,7 @@ onMounted(() => {
|
|
|
// formData.data[text] = res[text];
|
|
|
// }
|
|
|
// if (!props.detailStatus) {
|
|
|
- // editor.value.changeHtml(formData.data.remark);
|
|
|
+ // proxy.$refs.editor.changeHtml(formData.data.remark);
|
|
|
// }
|
|
|
// });
|
|
|
// }
|
|
|
@@ -426,24 +441,38 @@ const getStyle = (text) => {
|
|
|
return "";
|
|
|
}
|
|
|
};
|
|
|
-const rowIndex = ref(null);
|
|
|
-const openBOM = ref(false);
|
|
|
-const handleOpen = (index) => {
|
|
|
- rowIndex.value = index;
|
|
|
- openBOM.value = true;
|
|
|
+const openProduct = ref(false);
|
|
|
+const clickAddProduct = () => {
|
|
|
+ openProduct.value = true;
|
|
|
};
|
|
|
-const selectBOM = (item) => {
|
|
|
- if (item.id) {
|
|
|
- formData.data.orderSkuList[rowIndex.value].bomSpecId = item.id;
|
|
|
- formData.data.orderSkuList[rowIndex.value].bomSpecName = item.name;
|
|
|
- formData.data.orderSkuList[rowIndex.value].length = item.length;
|
|
|
- formData.data.orderSkuList[rowIndex.value].width = item.width;
|
|
|
- formData.data.orderSkuList[rowIndex.value].height = item.height;
|
|
|
- formData.data.orderSkuList[rowIndex.value].netWeight = item.netWeight;
|
|
|
- ElMessage({ message: "选择完成", type: "success" });
|
|
|
- openBOM.value = false;
|
|
|
+const selectProduct = (row) => {
|
|
|
+ if (row.id) {
|
|
|
+ let list = formData.data.orderSkuList.filter((item) => item.skuSpecId === row.id);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ return ElMessage("该产品已添加");
|
|
|
+ }
|
|
|
+ formData.data.orderSkuList.push({
|
|
|
+ skuId: row.skuId,
|
|
|
+ code: row.code,
|
|
|
+ name: row.name,
|
|
|
+ skuSpecId: row.id,
|
|
|
+ quantity: undefined,
|
|
|
+ customProcessingFee: "",
|
|
|
+ lssueFee: "",
|
|
|
+ deliveryMaterialsFee: "",
|
|
|
+ packingLabor: "",
|
|
|
+ unitPrice: "",
|
|
|
+ printType: "",
|
|
|
+ packageRemark: "",
|
|
|
+ subtotal: "",
|
|
|
+ orderSkuBomList: [],
|
|
|
+ });
|
|
|
+ ElMessage({ message: "添加成功", type: "success" });
|
|
|
+ } else {
|
|
|
+ ElMessage("添加失败");
|
|
|
}
|
|
|
};
|
|
|
+const rowIndex = ref(null);
|
|
|
const clickRemoveBOM = (index) => {
|
|
|
formData.data.orderSkuList[index].bomSpecId = "";
|
|
|
formData.data.orderSkuList[index].bomSpecName = "";
|
|
|
@@ -458,4 +487,41 @@ const clickRemoveBOM = (index) => {
|
|
|
margin-top: 10px !important;
|
|
|
margin-bottom: 10px !important;
|
|
|
}
|
|
|
+:deep(.ql-editor) {
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+:deep(.el-collapse-item__header) {
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+:deep(.el-collapse-item__arrow) {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.avatar-uploader .avatar {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: block;
|
|
|
+ background-color: black;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: var(--el-transition-duration-fast);
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+}
|
|
|
+.el-icon.avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px dashed var(--el-border-color);
|
|
|
+}
|
|
|
+:deep(.el-table__cell) {
|
|
|
+ vertical-align: top;
|
|
|
+}
|
|
|
</style>
|
