代碼:
<template>
<el-dialog
:title="!dataForm.id ? '新增' : '修改'"
:close-on-click-modal="false"
:visible.sync="visible"
>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-width="80px"
>
<el-form-item label="種類" prop="category">
<el-cascader
v-model="selectCategorys"
:options="categorys"
:props="categoryProps"
@change="categoryHandleChange"
clearable
filterable
></el-cascader>
</el-form-item>
<el-form-item label="參數" prop="parameter">
<el-cascader
v-model="selectParams"
:options="params"
:props="paramProps"
@change="paramHandleChange"
clearable
filterable
></el-cascader>
</el-form-item>
<el-form-item label="采購價" prop="purchasePrice">
<el-input v-model="dataForm.purchasePrice" placeholder="采購價"></el-input>
</el-form-item>
<el-form-item label="零售價" prop="retailPrice">
<el-input v-model="dataForm.retailPrice" placeholder="零售價"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false">取消</el-button>
<el-button type="primary" @click="dataFormSubmit()">確定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
paramProps: {
multiple: true,
value: "id",
label: "name",
children: "parameters"
},
categoryProps: {
value: "id",
label: "name",
children: "childrens"
},
visible: false,
selectCategorys: [],
selectParams: [],
categorys: [],
params: [],
dataForm: {
id: 0,
category: "",
parameter: "",
purchasePrice: "",
retailPrice: "",
createUser: "",
createDate: "",
status: ""
},
dataRule: {
category: [
{ required: true, message: "種類不能為空", trigger: "blur" }
],
parameter: [
{ required: true, message: "參數不能為空", trigger: "blur" }
],
purchasePrice: [
{ required: true, message: "采購價不能為空", trigger: "blur" }
],
retailPrice: [
{ required: true, message: "零售價不能為空", trigger: "blur" }
]
}
};
},
methods: {
getParams() {
this.$http({
url: this.$http.adornUrl("/main/parametergroup/list"),
method: "get",
params: this.$http.adornParams({
page: 0,
limit: 999999,
createUser: this.$store.state.user.name
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.params = data.page.list;
} else {
this.params = [];
}
this.params.forEach(pg => {
pg.parameters;
});
});
},
getCategorys() {
this.$http({
url: this.$http.adornUrl("/main/category/list/tree"),
method: "get",
params: this.$http.adornParams({})
}).then(({ data }) => {
console.log(data);
this.categorys = data.data;
this.handleCategory(this.categorys);
});
},
handleCategory(arr) {
for (let index = 0; index < arr.length; index++) {
if (arr[index].childrens.length == 0) {
arr[index] = {
id: arr[index].id,
name: arr[index].name,
parentId: arr[index].parentId
};
} else {
this.handleCategory(arr[index].childrens);
}
}
},
init(id) {
this.dataForm.id = id || 0;
this.visible = true;
this.$nextTick(() => {
this.$refs["dataForm"].resetFields();
this.getCategorys();
this.getParams();
if (this.dataForm.id) {
this.$http({
url: this.$http.adornUrl(
`/main/commoditycategory/info/${this.dataForm.id}`
),
method: "get",
params: this.$http.adornParams()
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataForm.category = data.commodityCategory.category;
console.log(this.dataForm.category);
if (this.dataForm.category.includes(",")) {
this.selectCategorys = this.dataForm.category.split(",");
} else {
this.selectCategorys = [this.dataForm.category];
}
this.dataForm.parameter = data.commodityCategory.parameter;
var arr = this.dataForm.parameter.split(",");
for (let index = 0; index < arr.length; index++) {
if (index % 2 == 0) {
this.selectParams.push([arr[index], arr[index + 1]]);
}
}
this.dataForm.purchasePrice =
data.commodityCategory.purchasePrice;
this.dataForm.retailPrice = data.commodityCategory.retailPrice;
this.dataForm.createUser = data.commodityCategory.createUser;
this.dataForm.createDate = data.commodityCategory.createDate;
this.dataForm.status = data.commodityCategory.status;
}
});
}
});
},
// 表單提交
dataFormSubmit() {
this.$refs["dataForm"].validate(valid => {
if (valid) {
this.$http({
url: this.$http.adornUrl(
`/main/commoditycategory/${!this.dataForm.id ? "save" : "update"}`
),
method: "post",
data: this.$http.adornData({
id: this.dataForm.id || undefined,
category: this.selectCategorys.join(","),
parameter: this.selectParams.join(","),
purchasePrice: this.dataForm.purchasePrice,
retailPrice: this.dataForm.retailPrice,
createUser: this.$store.state.user.name,
createDate: Date.now(),
status: this.dataForm.status
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
}
});
} else {
this.$message.error(data.msg);
}
});
}
});
},
paramHandleChange(value) {
this.dataForm.parameter = value.join(",");
},
categoryHandleChange(value) {
this.dataForm.category = value.join(",");
}
}
};
</script>
官網上顯示的樣式是這樣:
但是本地代碼啟動后是這樣:
請問是哪除了問題呢...求大神...