This commit is contained in:
qiaopengfei 2024-07-26 20:13:36 +08:00
parent 292496dacb
commit 4c4c44ce88
2 changed files with 163 additions and 77 deletions

View File

@ -36,7 +36,7 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<div v-for="(item, index) in props.specification_arr" :key="index"> <div v-for="(item, index) in newDataList" :key="index">
<div <div
style=" style="
display: flex; display: flex;
@ -76,7 +76,7 @@
v-model="item.inputGroup.valueName" v-model="item.inputGroup.valueName"
:placeholder="item.inputGroup.placeholder" :placeholder="item.inputGroup.placeholder"
@keydown=" @keydown="
item.inputGroup.keydown($event, item.inputGroup.valueName, index) input_child_keydown($event, item.inputGroup.valueName, index)
" "
> >
</el-input> </el-input>
@ -88,7 +88,7 @@
:type="el.type" :type="el.type"
round round
size="small" size="small"
@click="el.delete(item, ind)" @click="onDelValueItem(index, ind)"
> >
{{ el.label }}<el-icon class="el-icon--right"><Delete /></el-icon> {{ el.label }}<el-icon class="el-icon--right"><Delete /></el-icon>
</el-button> </el-button>
@ -106,9 +106,10 @@
</template> </template>
<script setup> <script setup>
import { ref, defineEmits, defineProps, reactive } from "vue"; import { ref, defineEmits, defineProps, reactive, onMounted } from "vue";
import { Warning, Delete } from "@element-plus/icons-vue"; import { Warning, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { deepClone } from "@/services/commont";
const $emit = defineEmits(["specificationClose", "submitSpecification"]); const $emit = defineEmits(["specificationClose", "submitSpecification"]);
const props = defineProps({ const props = defineProps({
specificationDialogVisible: { specificationDialogVisible: {
@ -137,22 +138,94 @@ const rules = reactive({
{ min: 1, max: 4, message: "字数限制最多输入4个字符", trigger: "blur" }, { min: 1, max: 4, message: "字数限制最多输入4个字符", trigger: "blur" },
], ],
}); });
const newDataList = ref([]);
const specification_list_index = ref(0);
onMounted(() => {
newDataList.value = deepClone(props.specification_arr);
});
let that = newDataList;
const submit_specification = (formEl) => { const submit_specification = (formEl) => {
formEl.validate((valid) => { formEl.validate((valid) => {
if (!valid || !ruleForm.name) return; if (!valid || !ruleForm.name) return;
if (props.specification_arr.length >= 2) if (newDataList.value.length >= 2)
return ElMessage.warning("超过输入限制!"); return ElMessage.warning("超过输入限制!");
$emit("submitSpecification", ruleForm.name); specification_list_index.value++;
newDataList.value.push({
label: ruleForm.name,
num: 0,
index: specification_list_index.value,
disabled: false,
keydown: (e, item, index) => {
if (e.key !== "Enter") return;
if (item.label.length <= 4) {
item.disabled = false;
} else {
ElMessage.warning("字数限制4个字符");
}
},
buttonGroup: [
{
type: "primary",
label: "编辑",
handler: (item) => {
item.disabled = true;
},
},
{
type: "danger",
label: "删除",
handler: (item, index) => {
newDataList.value.splice(index, 1);
},
},
],
inputGroup: {
valueName: "",
placeholder: "请输入规格属性,按回车健确认",
},
valueGrop: [],
});
ruleForm.name = ""; ruleForm.name = "";
}); });
}; };
function onDelValueItem(index, ind) {
let newdatas = JSON.parse(JSON.stringify(newDataList.value[index].valueGrop));
newdatas.splice(ind, 1);
newDataList.value[index].valueGrop = newdatas;
newDataList.value = Object.assign([], newDataList.value);
console.log(newDataList.value, "newDataList.value111");
}
function input_child_keydown(e, name, index) {
if (e.key !== "Enter" || !name) return;
if (newDataList.value.length <= 1) {
if (newDataList.value[index].valueGrop.length >= 10) return;
} else {
if (
newDataList.value[0].valueGrop.length *
newDataList.value[1].valueGrop.length >=
100
)
return;
}
newDataList.value[index].valueGrop.push({
type: "danger",
label: newDataList.value[index].inputGroup.valueName,
});
newDataList.value[index].num = newDataList.value[index].valueGrop.length;
newDataList.value[index].inputGroup.valueName = "";
}
const submitForm = () => { const submitForm = () => {
if (!props.specification_arr.length) console.log(newDataList.value, "newDataList.value", newDataList.value.length);
if (!newDataList.value.length)
return ElMessage.warning("没有添加任何规格属性!"); return ElMessage.warning("没有添加任何规格属性!");
if (!props.specification_arr.every((item) => item.valueGrop.length)) if (!newDataList.value.every((item) => item.valueGrop.length))
return ElMessage.warning("添加规格后至少添加一个属性值!"); return ElMessage.warning("添加规格后至少添加一个属性值!");
$emit("specificationSubmit", props.specification_arr); console.log(newDataList.value, "newDataList.value");
$emit("specificationSubmit", newDataList.value);
}; };
const specificationClose = () => { const specificationClose = () => {
$emit("specificationClose"); $emit("specificationClose");

View File

@ -426,6 +426,16 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</div> </div>
<div>
<el-form-item prop="logistics">
<el-input
v-model="ruleForm.transportFee"
:placeholder="el.label"
size="small"
>
</el-input>
</el-form-item>
</div>
</div> </div>
</div> </div>
</el-form> </el-form>
@ -851,20 +861,20 @@ const logistics = reactive({
title: "物流", title: "物流",
configured: { configured: {
label: "物流配置", label: "物流配置",
prop: "", prop: "logistics",
params: "", params: "logistics",
options: [ options: [
{ {
label: "包邮", label: "包邮",
value: "", value: "1",
}, },
{ {
label: "统一运费", label: "统一运费",
value: "", value: "2",
}, },
{ {
label: "运费模板", label: "运费模板",
value: "", value: "3",
}, },
], ],
change: () => {}, change: () => {},
@ -911,7 +921,7 @@ const ruleForm = reactive({
whiteBgImage: 0, // whiteBgImage: 0, //
flag: 0, //稿-0 -1 flag: 0, //稿-0 -1
republishId: 0, //id republishId: 0, //id
logistics: 0, // 1 2 3 logistics: "1", // 1 2 3
transportFee: "", // 2 transportFee: "", // 2
templateId: 0, // 3 templateId: 0, // 3
}); });
@ -925,6 +935,7 @@ const rules = reactive({
], ],
stuffStatus: [{ trigger: "blur", required: true, message: "请输入商品成色" }], stuffStatus: [{ trigger: "blur", required: true, message: "请输入商品成色" }],
quantity: [{ trigger: "blur", required: true, message: "请输入库存" }], quantity: [{ trigger: "blur", required: true, message: "请输入库存" }],
logistics: [{ trigger: "blur", required: true, message: "请选择物流配置" }],
}); });
const createFilter = (queryString) => { const createFilter = (queryString) => {
return (restaurant) => { return (restaurant) => {
@ -953,8 +964,11 @@ const specificationSubmit = (row) => {
ruleFormRef.value.resetFields(); ruleFormRef.value.resetFields();
if (!row.length) return; if (!row.length) return;
newDataList.value = deepClone(row); newDataList.value = deepClone(row);
priceList.specification_arr = deepClone(row);
console.log(priceList, "priceList", row);
const specification_list = []; const specification_list = [];
const tabelList = []; const tabelList = [];
priceList.fixPrice = [ priceList.fixPrice = [
{ {
type: "edit", type: "edit",
@ -1209,68 +1223,67 @@ onMounted(() => {
createGoods.radio_group_sell.change(); createGoods.radio_group_sell.change();
}); });
const specification_list_index = ref(0); // const submitSpecification = (valName) => {
const submitSpecification = (valName) => { // specification_list_index.value++;
specification_list_index.value++; // priceList.specification_arr.push({
priceList.specification_arr.push({ // label: valName,
label: valName, // num: 0,
num: 0, // index: specification_list_index.value,
index: specification_list_index.value, // disabled: false,
disabled: false, // keydown: (e, item, index) => {
keydown: (e, item, index) => { // if (e.key !== "Enter") return;
if (e.key !== "Enter") return; // if (item.label.length <= 4) {
if (item.label.length <= 4) { // item.disabled = false;
item.disabled = false; // } else {
} else { // ElMessage.warning("4");
ElMessage.warning("字数限制4个字符"); // }
} // },
}, // buttonGroup: [
buttonGroup: [ // {
{ // type: "primary",
type: "primary", // label: "",
label: "编辑", // handler: (item) => {
handler: (item) => { // item.disabled = true;
item.disabled = true; // },
}, // },
}, // {
{ // type: "danger",
type: "danger", // label: "",
label: "删除", // handler: (item, index) => {
handler: (item, index) => { // priceList.specification_arr.splice(index, 1);
priceList.specification_arr.splice(index, 1); // },
}, // },
}, // ],
], // inputGroup: {
inputGroup: { // valueName: "",
valueName: "", // placeholder: "",
placeholder: "请输入规格属性,按回车健确认", // keydown: (e, name, index) => {
keydown: (e, name, index) => { // if (e.key !== "Enter" || !name) return;
if (e.key !== "Enter" || !name) return; // if (priceList.specification_arr.length <= 1) {
if (priceList.specification_arr.length <= 1) { // if (priceList.specification_arr[index].valueGrop.length >= 10) return;
if (priceList.specification_arr[index].valueGrop.length >= 10) return; // } else {
} else { // if (
if ( // priceList.specification_arr[0].valueGrop.length *
priceList.specification_arr[0].valueGrop.length * // priceList.specification_arr[1].valueGrop.length >=
priceList.specification_arr[1].valueGrop.length >= // 100
100 // )
) // return;
return; // }
} // priceList.specification_arr[index].valueGrop.push({
priceList.specification_arr[index].valueGrop.push({ // type: "danger",
type: "danger", // label: priceList.specification_arr[index].inputGroup.valueName,
label: priceList.specification_arr[index].inputGroup.valueName, // delete: (item, ind) => {
delete: (item, ind) => { // priceList.specification_arr[index].valueGrop.splice(ind, 1);
priceList.specification_arr[index].valueGrop.splice(ind, 1); // },
}, // });
}); // priceList.specification_arr[index].num =
priceList.specification_arr[index].num = // priceList.specification_arr[index].valueGrop.length;
priceList.specification_arr[index].valueGrop.length; // priceList.specification_arr[index].inputGroup.valueName = "";
priceList.specification_arr[index].inputGroup.valueName = ""; // },
}, // },
}, // valueGrop: [],
valueGrop: [], // });
}); // };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>