tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: eslint代码检查优化

Browse Source 
Former-commit-id: 4c11b5d0cdd10f28148cf3d9b593f85e082cdc51
This commit is contained in:
郝先瑞
2022-04-15 00:45:06 +08:00
parent 15022f51b9
commit dd93144788
69 changed files with 820 additions and 1774 deletions
Download Patch File Download Diff File Expand all files Collapse all files

321
src/views/pms/goods/components/GoodsStock.vue
View File

@@ -4,29 +4,13 @@
<el-card class="box-card">
<template #header>
<span>商品规格</span>
<el-button
:icon="Plus"
type="success"
@click="handleSpecAdd"
size="small"
style="float: right"
>
<el-button :icon="Plus" type="success" @click="handleSpecAdd" size="small" style="float: right">
添加规格项
</el-button>
</template>
<el-form
ref="specFormRef"
:model="specForm"
:inline="true"
size="small"
>
<el-table
ref="specTableRef"
:data="specForm.specList"
row-key="id"
size="small"
>
<el-form ref="specFormRef" :model="specForm" :inline="true" size="small">
<el-table ref="specTableRef" :data="specForm.specList" row-key="id" size="small">
<el-table-column align="center" width="50">
<template>
<svg-icon class="drag-handler" icon-class="drag" />
@@ -34,66 +18,31 @@
</el-table-column>
<el-table-column label="规格名" width="200">
<template #default="scope">
<el-form-item
:prop="'specList[' + scope.$index + '].name'"
:rules="rules.spec.name"
>
<el-input
type="text"
v-model="scope.row.name"
size="small"
@input="handleSpecChange()"
/>
<el-form-item :prop="'specList[' + scope.$index + '].name'" :rules="rules.spec.name">
<el-input type="text" v-model="scope.row.name" size="small" @input="handleSpecChange()" />
</el-form-item>
</template>
</el-table-column>
<el-table-column>
<template #header>
规格值
<el-link
type="danger"
style="font-size: 12px"
:underline="false"
>（默认第一条规格包含图片）</el-link
>
<el-link type="danger" style="font-size: 12px" :underline="false">（默认第一条规格包含图片）</el-link>
</template>
<template #default="scope">
<div
v-for="item in scope.row.values"
:key="item.id"
style="margin-right: 15px; display: inline-block"
>
<el-tag
size="small"
closable
:type="colors[scope.$index % colors.length]"
@close="handleSpecValueRemove(scope.$index, item.id)"
>
<div v-for="item in scope.row.values" :key="item.id" style="margin-right: 15px; display: inline-block">
<el-tag size="small" closable :type="(colors[scope.$index % colors.length] as any)"
@close="handleSpecValueRemove(scope.$index, item.id)">
{{ item.value }}
</el-tag>
<single-upload
v-model="item.picUrl"
v-if="scope.$index == 0"
style="margin-top: 5px"
/>
<single-upload v-model="item.picUrl" v-if="scope.$index == 0" style="margin-top: 5px" />
</div>
<el-input
v-if="tagInputs.length > 0 && tagInputs[scope.$index].visible"
v-model="tagInputs[scope.$index].value"
@keyup.enter="handleSpecValueInput(scope.$index)"
@blur="handleSpecValueInput(scope.$index)"
style="width: 80px; vertical-align: top"
size="small"
/>
<el-button
v-else
@click="handleSpecValueAdd(scope.$index)"
:icon="Plus"
style="vertical-align: top"
size="small"
>
<el-input v-if="tagInputs.length > 0 && tagInputs[scope.$index].visible"
v-model="tagInputs[scope.$index].value" @keyup.enter="handleSpecValueInput(scope.$index)"
@blur="handleSpecValueInput(scope.$index)" style="width: 80px; vertical-align: top" size="small" />
<el-button v-else @click="handleSpecValueAdd(scope.$index)" :icon="Plus" style="vertical-align: top"
size="small">
添加规格值
</el-button>
</template>
@@ -101,14 +50,8 @@
<el-table-column width="60" label="操作">
<template #default="scope">
<el-button
type="danger"
:icon="Minus"
size="small"
circle
plain
@click.stop="handleSpecRemove(scope.$index)"
/>
<el-button type="danger" :icon="Minus" size="small" circle plain
@click.stop="handleSpecRemove(scope.$index)" />
</template>
</el-table-column>
</el-table>
@@ -120,39 +63,23 @@
<span>商品库存</span>
</template>
<el-form ref="skuFormRef" :model="skuForm" size="small" :inline="true">
<el-table
:data="skuForm.skuList"
:span-method="objectSpanMethod"
highlight-current-row
size="small"
border
>
<el-table-column
v-for="(title, index) in specTitles"
:key="index"
align="center"
:prop="'specValue' + (index + 1)"
:label="title"
>
<el-table :data="skuForm.skuList" :span-method="(objectSpanMethod as any)" highlight-current-row size="small"
border>
<el-table-column v-for="(title, index) in specTitles" :key="index" align="center"
:prop="'specValue' + (index + 1)" :label="title">
</el-table-column>
<el-table-column label="商品编码" align="center">
<template #default="scope">
<el-form-item
:prop="'skuList[' + scope.$index + '].skuSn'"
:rules="rules.sku.skuSn"
>
<el-input v-model="scope.row.skuSn"/>
<el-form-item :prop="'skuList[' + scope.$index + '].skuSn'" :rules="rules.sku.skuSn">
<el-input v-model="scope.row.skuSn" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="价格" align="center">
<template #default="scope">
<el-form-item
:prop="'skuList[' + scope.$index + '].price'"
:rules="rules.sku.price"
>
<el-form-item :prop="'skuList[' + scope.$index + '].price'" :rules="rules.sku.price">
<el-input v-model="scope.row.price" />
</el-form-item>
</template>
@@ -160,10 +87,7 @@
<el-table-column label="库存" align="center">
<template #default="scope">
<el-form-item
:prop="'skuList[' + scope.$index + '].stockNum'"
:rules="rules.sku.stockNum"
>
<el-form-item :prop="'skuList[' + scope.$index + '].stockNum'" :rules="rules.sku.stockNum">
<el-input v-model="scope.row.stockNum" />
</el-form-item>
</template>
@@ -179,17 +103,15 @@
</div>
</template>
<script setup>
<script setup lang="ts">
import {
computed,
getCurrentInstance,
nextTick,
onMounted,
reactive,
ref,
toRefs,
unref,
watch,
watch
} from "vue";
import { useRouter } from "vue-router";
import { Plus, Minus } from "@element-plus/icons-vue";
@@ -204,32 +126,41 @@ import SvgIcon from "@/components/SvgIcon/index.vue";
import SingleUpload from "@/components/Upload/SingleUpload.vue";
// import Sortable from 'sortablejs'
const categoryId = computed(() => props.modelValue.categoryId);
const emit = defineEmits(["prev", "next"]);
const proxy = getCurrentInstance();
const emit = defineEmits(["prev", "next", 'update:modelValue']);
/* const proxy = getCurrentInstance(); */
const router = useRouter();
const specTableRef = ref(ElTable);
/* const specTableRef = ref(ElTable); */
const specFormRef = ref(ElForm);
const skuFormRef = ref(ElForm);
const props = defineProps({
modelValue: {
type: Object,
default: {},
},
default: () => {
return {}
}
}
});
const goodsInfo: any = computed({
get: () => props.modelValue,
set: (value) => {
emit('update:modelValue', value)
}
})
const state = reactive({
specForm: {
specList: [],
specList: [] as any[],
},
skuForm: {
skuList: [],
skuList: [] as any[],
},
// 规格项表格标题
specTitles: [],
specTitles: [] as any[],
rules: {
spec: {
name: [{ required: true, message: "请输入规格名称", trigger: "blur" }],
@@ -245,56 +176,51 @@ const state = reactive({
},
colors: ["", "success", "warning", "danger"],
tagInputs: [{ value: undefined, visible: false }], // 规格值标签临时值和显隐控制
loading: undefined,
});
const { specForm, skuForm, specTitles, rules, colors, tagInputs, loading } =
const { specForm, skuForm, specTitles, rules, colors, tagInputs } =
toRefs(state);
watch(
categoryId,
(value) => {
// 商品编辑不加载分类下的规格
const spuId = props.modelValue.id;
if (spuId) {
return false;
}
if (value) {
// type=1 商品分类下的规格
listAttributes({ categoryId: value, type: 1 }).then((response) => {
const specList = response.data;
if (specList && specList.length > 0) {
specList.forEach((item) => {
state.specForm.specList.push({
name: item.name,
values: [],
});
watch(() => goodsInfo.value.categoryId, (newVal) => {
// 商品编辑不加载分类下的规格
const goodsId = goodsInfo.value.id;
if (goodsId) {
return false;
}
if (newVal) {
// type=1 商品分类下的规格
listAttributes({ categoryId: newVal, type: 1 }).then((response) => {
const specList = response.data;
if (specList && specList.length > 0) {
specList.forEach((item: any) => {
state.specForm.specList.push({
name: item.name,
values: [],
});
loadData();
}
});
}
},
});
loadData();
}
});
}
},
{
immediate: true,
deep: true,
}
);
})
watch(state.specForm.specList,(value)=>{
watch(state.specForm.specList, () => {
generateSkuList()
})
function loadData() {
props.modelValue.specList.forEach((specItem) => {
goodsInfo.value.specList.forEach((specItem: any) => {
const specIndex = state.specForm.specList.findIndex(
(item) => item.name == specItem.name
(item: any) => item.name == specItem.name
);
if (specIndex > -1) {
state.specForm.specList[specIndex].values.push({
(state.specForm.specList[specIndex] as any).values.push({
id: specItem.id,
value: specItem.value,
picUrl: specItem.picUrl,
@@ -315,7 +241,7 @@ function loadData() {
}
// SKU规格ID拼接字符串处理
props.modelValue.skuList.forEach((sku) => {
goodsInfo.value.skuList.forEach((sku: any) => {
sku.specIdArr = sku.specIds.split("_");
});
@@ -335,7 +261,7 @@ function loadData() {
*/
function handleSpecChange() {
const specList = JSON.parse(JSON.stringify(state.specForm.specList));
state.specTitles = specList.map((item) => item.name);
state.specTitles = specList.map((item: any) => item.name);
}
/**
@@ -380,23 +306,23 @@ function handleSpecReorder() {
*/
function generateSkuList() {
// 如果规格为空，生成SKU列表为空
if(state.specForm.specList.length==0){
state.skuForm.skuList = [];
if (state.specForm.specList.length == 0) {
state.skuForm.skuList = [];
return;
}
const specList = JSON.parse(
JSON.stringify(
state.specForm.specList.filter((item) => item.values&&item.values.length > 0)
state.specForm.specList.filter((item) => item.values && item.values.length > 0)
)
); // 深拷贝，取有属性的规格项，否则笛卡尔积运算得到的SKU列表值为空
const skuList = specList.reduce(
(acc, curr) => {
let result = [];
acc.forEach((item) => {
(acc: any, curr: any) => {
let result = [] as any[];
acc.forEach((item: any) => {
// curr => { 'id':1,'name':'颜色','values':[{id:1,value:'白色'},{id:2,value:'黑色'},{id:3,value:'蓝色'}] }
curr.values.forEach((v) => {
curr.values.forEach((v: any) => {
// v=>{id:1,value:'白色'}
let temp = Object.assign({}, item);
temp.specValues += v.value + "_"; // 规格值拼接
@@ -409,17 +335,17 @@ function generateSkuList() {
[{ specValues: "", specIds: "" }]
);
skuList.forEach((item) => {
skuList.forEach((item: any) => {
item.specIds = item.specIds.substring(0, item.specIds.length - 1);
item.name = item.specValues
.substring(0, item.specValues.length - 1)
.replaceAll("_", " ");
const specIdArr = item.specIds.split("|");
const skus = props.modelValue.skuList.filter(
(sku) =>
const skus = goodsInfo.value.skuList.filter(
(sku: any) =>
sku.specIdArr.length === specIdArr.length &&
sku.specIdArr.every((a) => specIdArr.some((b) => a === b)) &&
specIdArr.every((x) => sku.specIdArr.some((y) => x === y))
sku.specIdArr.every((a: any) => specIdArr.some((b: any) => a === b)) &&
specIdArr.every((x: any) => sku.specIdArr.some((y: any) => x === y))
); // 数据库的SKU列表
if (skus && skus.length > 0) {
@@ -432,12 +358,12 @@ function generateSkuList() {
const specValueArr = item.specValues
.substring(0, item.specValues.length - 1)
.split("_"); // ['黑','6+128G','官方标配']
specValueArr.forEach((v, i) => {
specValueArr.forEach((v: any, i: any) => {
const key = "specValue" + (i + 1);
item[key] = v;
if (i == 0 && state.specForm.specList.length > 0) {
const valueIndex = state.specForm.specList[0].values.findIndex(
(specValue) => specValue.value == v
(specValue: any) => specValue.value == v
);
if (valueIndex > -1) {
item.picUrl = state.specForm.specList[0].values[valueIndex].picUrl;
@@ -456,7 +382,7 @@ function handleSpecAdd() {
ElMessage.warning("最多支持3组规格");
return;
}
state.specForm.specList.push({values:[]});
state.specForm.specList.push({ values: [] });
state.tagInputs.push({ value: undefined, visible: false });
handleSpecReorder();
}
@@ -465,7 +391,7 @@ function handleSpecAdd() {
* 删除规格
* @param index
*/
function handleSpecRemove(index) {
function handleSpecRemove(index: any) {
state.specForm.specList.splice(index, 1);
state.tagInputs.splice(index, 1);
generateSkuList();
@@ -478,7 +404,7 @@ function handleSpecRemove(index) {
*
* @param specIndex
*/
function handleSpecValueAdd(specIndex) {
function handleSpecValueAdd(specIndex: any) {
state.tagInputs[specIndex].visible = true;
}
@@ -488,10 +414,10 @@ function handleSpecValueAdd(specIndex) {
* @param rowIndex
* @param specValueId
*/
function handleSpecValueRemove(rowIndex, specValueId) {
function handleSpecValueRemove(rowIndex: any, specValueId: any) {
const specList = JSON.parse(JSON.stringify(state.specForm.specList));
const removeIndex = specList[rowIndex].values
.map((item) => item.id)
.map((item: any) => item.id)
.indexOf(specValueId);
specList[rowIndex].values.splice(removeIndex, 1);
state.specForm.specList = specList;
@@ -503,13 +429,13 @@ function handleSpecValueRemove(rowIndex, specValueId) {
/**
* 规格值输入
*/
function handleSpecValueInput(rowIndex) {
function handleSpecValueInput(rowIndex: any) {
const currSpecValue = state.tagInputs[rowIndex].value;
const specValues = state.specForm.specList[rowIndex].values;
if (
specValues &&
specValues.length > 0 &&
specValues.map((item) => item.value).includes(currSpecValue)
specValues.map((item: any) => item.value).includes(currSpecValue)
) {
ElMessage.warning("规格值重复，请重新输入");
return false;
@@ -518,12 +444,11 @@ function handleSpecValueInput(rowIndex) {
if (specValues && specValues.length > 0) {
// 临时规格值ID tid_1_1
let maxSpecValueIndex = specValues
.filter((item) => item.id.includes("tid_"))
.map((item) => item.id.split("_")[2])
.reduce((acc, curr) => {
.filter((item: any) => item.id.includes("tid_"))
.map((item: any) => item.id.split("_")[2])
.reduce((acc: any, curr: any) => {
return acc > curr ? acc : curr;
}, 0);
console.log("maxSpecValueIndex", maxSpecValueIndex);
state.specForm.specList[rowIndex].values[specValues.length] = {
value: currSpecValue,
id: "tid_" + (rowIndex + 1) + "_" + ++maxSpecValueIndex,
@@ -545,7 +470,7 @@ function handleSpecValueInput(rowIndex) {
* @param cellObj 单元格对象
*/
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
let mergeRows = [1, 1, 1]; // 分别对应规格1、规格2、规格3列合并的行数
const specLen = state.specForm.specList.filter(
(item) => item.values && item.values.length > 0
@@ -589,20 +514,18 @@ function submitForm() {
ElMessage.warning("未添加商品库存");
return false;
}
specFormRef.value.validate((specValid) => {
specFormRef.value.validate((specValid: any) => {
if (specValid) {
skuFormRef.value.validate((skuValid) => {
skuFormRef.value.validate((skuValid: any) => {
if (skuValid) {
// openFullScreen()
// 重组商品的规格和SKU列表
let submitsData = Object.assign({}, props.modelValue);
let submitsData = Object.assign({}, goodsInfo.value);
delete submitsData.specList;
delete submitsData.skuList;
let specList = [];
let specList = [] as any[];
state.specForm.specList.forEach((item) => {
item.values.forEach((value) => {
item.values.forEach((value: any) => {
value.name = item.name;
});
specList = specList.concat(item.values);
@@ -613,43 +536,35 @@ function submitForm() {
submitsData.originPrice *= 100;
let skuList = JSON.parse(JSON.stringify(state.skuForm.skuList));
skuList.map((item) => {
skuList.map((item: any) => {
item.price *= 100;
return item;
});
submitsData.skuList = skuList;
console.log("提交数据", submitsData);
const goodsId = props.modelValue.id;
const goodsId = goodsInfo.value.id;
if (goodsId) {
// 编辑商品提交
updateGoods(goodsId, submitsData).then(
(res) => {
() => {
router.push({ path: "/pms/goods" });
ElNotification({
title: "提示",
message: "编辑商品成功",
type: "success",
});
//closeFullScreen()
},
(err) => {
//closeFullScreen()
}
);
} else {
// 新增商品提交
addGoods(submitsData).then(
(response) => {
() => {
router.push({ path: "/pms/goods" });
ElNotification({
title: "提示",
message: "新增商品成功",
type: "success",
});
// closeFullScreen()
},
(err) => {
// closeFullScreen()
}
);
}
@@ -659,8 +574,8 @@ function submitForm() {
});
}
function openFullScreen() {
state.loading = proxy.$loading({
/* function openFullScreen() {
state.loading = (proxy as any).$loading({
lock: true,
text: "商品信息提交中，请等待...",
spinner: "el-icon-loading",
@@ -670,18 +585,14 @@ function openFullScreen() {
function closeFullScreen() {
if (state.loading) {
state.loading.close();
(state.loading as any).close();
}
}
} */
function handlePrev() {
emit("prev");
}
function handNext() {
emit("next");
}
onMounted(() => {
loadData();
});
@@ -704,7 +615,7 @@ onMounted(() => {
}
}
.el-form--inline .el-form-item{
.el-form--inline .el-form-item {
margin-top: 18px;
}
</style>