cdn引入vue和ElementPlus
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
<link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/theme-chalk/index.css”>
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
<div id="app">
<div class="alert mt15 mb5">
<strong>{$Think.lang.operating_instructions}：</strong>
<ul> <li>{$Think.lang.sellerspec_tip1}</li>
<li> {$Think.lang.sellerspec_tip2}
<font color="red">{$Think.lang.sellerspec_tip3}</font>
{$Think.lang.sellerspec_tip4}
</li>
<li>{$Think.lang.sellerspec_tip5}</li>
</ul> </div>
<div dstype="add_sv" class="dssc-btn" @click="dialogFormVisible = true">
<i class="iconfont"></i>添加规格值
</div>
<table class="dssc-default-table" style="width: 100%;">
<thead> <tr> <th class="w80">id</th>
<th class="tl">规格值名称</th>
<th class="w300 tl">排序</th>
<th class="w110">操作</th>
</tr> </thead>
<tr class="bd-line" v-for="(item,key) in specList">
<td class="w80">{{item.sp_id}}</td>
<td class="tl">{{item.sp_name}}</td>
<td class="w300 tl">{{item.sp_sort}}</td>
<td class="w110 dscs-table-handle">
<span class="btn-orange"><el-button @click="handleDelete(key)"
type="info">删除</el-button></span>
<span><el-button @click="showFormDialog(key)" type="success">修改</el-button></span>
</td> </tr>
</table>
<el-dialog v-model="dialogFormVisible" title="Shipping address" :visible.sync="formDialogVisible" :before-close="handleClose">
<el-form :model="form" ref="refForm" :rules="formRules">
<el-form-item label="id" prop="sp_id" v-show="isShowSpId">
<el-input v-model="form.sp_id" :disabled="true"></el-input>
</el-form-item> <el-form-item label="名称" prop="sp_name">
<el-input v-model="form.sp_name"></el-input>
</el-form-item> <el-form-item label="排序" prop="sp_sort">
<el-input-number v-model="form.sp_sort" :min="0" :max="99999"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div> </el-dialog>
</div>
<script>
const {createApp} = Vue
const app = createApp({
data() {
return {
specList: [],
dialogFormVisible: false,
isShowSpId: false,
form: {
sp_name: '',
sp_id: '',
sp_sort: ''
},
titleMap: {
addEquipment: "新增",
editEquipment: "修改",
},
formRules: {
sp_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
sp_sort: [
{ required: true, message: '请输入排序', trigger: 'blur' },
{ type: 'integer', message: '请输入正确的排序', trigger: 'blur'},
],
sp_id: '',
},
sp_id_rule: [
{ required: true, message: '请输入sp_id', trigger: 'blur' },
],
}
},
mounted() {
axios.get('http://local.dsmall.com/home/Sellerspec/list.html')
.then(response => {
if (response.data.code === 10000) {
this.specList = response.data.data;
}else {
this.$message.error({
message: response.data.msg,
type: 'error'
})
}
})
.catch(error => {
ElementPlus.ElNotification({
title: 'Title',
message: ('i', {style: 'color: teal'}, error),
})
console.log(error)
})
},
methods: {
showFormDialog(id) {
this.dialogFormVisible = true;
if (id === undefined || this.specList[id] === undefined) {
this.form.sp_id = ''
this.form.sp_name = ''
this.form.sp_sort = ''
return
}
this.form.sp_id = this.specList[id].sp_id
this.form.sp_name = this.specList[id].sp_name
this.form.sp_sort = this.specList[id].sp_sort
this.formRules.sp_id = this.sp_id_rule
},
handleEdit() {
this.$refs.refForm.validate(valid => {
if (valid) {
const data = axios.post('http://local.dsmall.com/home/Sellerspec/edit.html', this.form,{
sp_id: this.form.sp_id,
sp_name: this.form.sp_name,
sp_sort: this.form.sp_sort
}).then(response => {
console.log(response.data)
if (response.data.code === 10000) {
this.specList.push(response.data.data)
this.$message.success({
message: '修改成功',
type: 'success'
})
}else {
this.$message.error({
message: response.data.msg,
type: 'error'
})
}
}).catch(error => {
console.log(error)
})
} else {
// 表单验证不通过
console.log('error submit!!')
return false
}
})
},
handleSubmit() {
this.$refs.refForm.validate( async (valid) => {
if (valid) {
try {
const data = await axios.post('http://local.dsmall.com/home/Sellerspec/create.html', {
sp_name: this.form.sp_name,
sp_sort: this.form.sp_sort
})
console.log(data.data)
if (data.data.code === 10000) {
this.$message.success('添加成功')
this.specList.push(data.data.data)
this.dialogFormVisible = false
} else {
this.$message.error(data.data.msg)
}
} catch (error) {
console.log(error)
this.$message.error(error.message)
}
}
})
},
handleDelete(key) {
this.$confirm('确认删除该规格值吗？')
.then(async () => {
try {
const item = this.specList[key]
const {data} = await axios.post('http://local.dsmall.com/home/Sellerspec/delete.html', {
sp_id: item.sp_id
})
if (data.code === 10000) {
this.$message.success({
message: '删除成功',
type: 'success'
})
this.specList.splice(key, 1)
} else {
this.$message.error({
message: data.data.msg,
type: 'error'
})
}
} catch (error) {
console.log(error)
}
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
handleClose:function () {
this.dialogFormVisible = false
this.form.sp_name = ''
this.form.sp_id = ''
this.form.sp_sort = ''
}
}
})
// 注册表单组件
app.use(ElementPlus);
app.mount('#app');
</script>
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：