<template>
|
<!--
|
作者：系统
|
时间：2025-10-28
|
描述：名片等级管理
|
-->
|
<div class="common-seach-wrap">
|
<div class="search-left">
|
<el-button type="primary" @click="addGrade" v-auth="'/plus/business/grade/add'">添加等级</el-button>
|
</div>
|
|
<div class="table-container">
|
<el-table v-loading="loading" :data="listData" border>
|
<el-table-column prop="grade_id" label="等级ID" width="80" align="center"></el-table-column>
|
<el-table-column prop="name" label="等级名称" align="center"></el-table-column>
|
<el-table-column prop="price" label="查看联系方式价格" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.price>0 ? '¥' + scope.row.price : '免费' }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="weight" label="权重" align="center">
|
<!--<template slot-scope="scope">
|
<el-input-number
|
v-model="scope.row.weight"
|
:min="0"
|
size="mini"
|
@change="handleWeightChange(scope.row)"
|
v-auth="'/plus/business/grade/edit'"
|
></el-input-number>
|
</template>-->
|
</el-table-column>
|
<el-table-column prop="create_time" label="创建时间" width="180" align="center">
|
</el-table-column>
|
<el-table-column prop="update_time" label="更新时间" width="180" align="center">
|
</el-table-column>
|
<el-table-column label="操作" width="180" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
@click="editGrade(scope.row)"
|
v-auth="'/plus/business/grade/edit'"
|
>编辑</el-button>
|
<el-button
|
type="text"
|
@click="deleteGrade(scope.row)"
|
v-auth="'/plus/business/grade/delete'"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- 添加/编辑等级对话框 -->
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="dialogVisible"
|
width="500px"
|
@close="handleClose"
|
>
|
<el-form :model="formData" :rules="rules" ref="formData" label-width="150px">
|
<el-form-item label="等级名称" prop="name">
|
<el-input v-model="formData.name" placeholder="请输入等级名称"></el-input>
|
</el-form-item>
|
<el-form-item label="查看联系方式价格" prop="price">
|
<el-input
|
v-model.number="formData.price"
|
placeholder="请输入价格，0表示免费"
|
type="number"
|
:min="0"
|
:step="0.01"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="权重" prop="weight">
|
<el-input-number
|
v-model="formData.weight"
|
:min="0"
|
placeholder="权重越小，排序越靠前"
|
></el-input-number>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import BusinessApi from '@/api/business.js';
|
|
export default {
|
data() {
|
return {
|
loading: false,
|
listData: [],
|
dialogVisible: false,
|
dialogTitle: '',
|
formData: {
|
grade_id: '',
|
name: '',
|
price: 0.00,
|
weight: 100
|
},
|
rules: {
|
name: [
|
{ required: true, message: '请输入等级名称', trigger: 'blur' },
|
{ min: 1, max: 20, message: '等级名称长度在 1 到 20 个字符', trigger: 'blur' }
|
],
|
price: [
|
{ type: 'number', min: 0, message: '价格不能小于0', trigger: 'blur' }
|
],
|
weight: [
|
{ type: 'number', required: true, message: '请输入权重', trigger: 'blur' },
|
{ type: 'number', min: 0, message: '权重不能小于0', trigger: 'blur' }
|
]
|
}
|
};
|
},
|
mounted() {
|
this.loadData();
|
},
|
methods: {
|
// 加载数据
|
loadData() {
|
this.loading = true;
|
BusinessApi.gradeList().then(res => {
|
this.loading = false;
|
this.listData = res.data.list || [];
|
console.log(this.listData);
|
|
}).catch(() => {
|
this.loading = false;
|
this.$message.error('获取数据失败');
|
});
|
},
|
|
// 添加等级
|
addGrade() {
|
this.dialogTitle = '添加等级';
|
this.formData = {
|
grade_id: '',
|
name: '',
|
price: 0.00,
|
weight: 100
|
};
|
this.dialogVisible = true;
|
},
|
|
// 编辑等级
|
editGrade(row) {
|
this.dialogTitle = '编辑等级';
|
this.formData = {
|
grade_id: row.grade_id,
|
name: row.name,
|
price: parseFloat(row.price) || 0.00,
|
weight: parseInt(row.weight) || 100
|
};
|
this.dialogVisible = true;
|
},
|
|
// 关闭对话框
|
handleClose() {
|
this.$refs.formData.resetFields();
|
},
|
|
// 提交表单
|
submitForm() {
|
this.$refs.formData.validate((valid) => {
|
if (valid) {
|
const params = { ...this.formData };
|
|
if (params.grade_id) {
|
// 编辑
|
BusinessApi.gradeEdit(params).then(res => {
|
if (res.code === 1) {
|
this.$message.success('编辑成功');
|
this.dialogVisible = false;
|
this.loadData();
|
} else {
|
this.$message.error(res.msg || '编辑失败');
|
}
|
}).catch(() => {
|
this.$message.error('编辑失败');
|
});
|
} else {
|
// 添加
|
BusinessApi.gradeAdd(params).then(res => {
|
if (res.code === 1) {
|
this.$message.success('添加成功');
|
this.dialogVisible = false;
|
this.loadData();
|
} else {
|
this.$message.error(res.msg || '添加失败');
|
}
|
}).catch(() => {
|
this.$message.error('添加失败');
|
});
|
}
|
}
|
});
|
},
|
|
// 删除等级
|
deleteGrade(row) {
|
this.$confirm('确定要删除这个等级吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
BusinessApi.gradeDelete({ grade_id: row.grade_id }).then(res => {
|
if (res.code === 1) {
|
this.$message.success('删除成功');
|
this.loadData();
|
} else {
|
this.$message.error(res.msg || '删除失败');
|
}
|
}).catch(() => {
|
this.$message.error('删除失败');
|
});
|
}).catch(() => {});
|
},
|
|
// 处理权重变化
|
handleWeightChange(row) {
|
const params = {
|
grade_id: row.grade_id,
|
weight: row.weight,
|
name: row.name,
|
price: row.price
|
};
|
|
BusinessApi.gradeEdit(params).then(res => {
|
if (res.code !== 1) {
|
this.$message.error(res.msg || '更新权重失败');
|
this.loadData(); // 重新加载数据
|
}
|
}).catch(() => {
|
this.$message.error('更新权重失败');
|
this.loadData();
|
});
|
},
|
|
// 格式化日期
|
formatDate(timestamp) {
|
if (!timestamp) return '';
|
const date = new Date(timestamp * 1000);
|
const year = date.getFullYear();
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
const day = date.getDate().toString().padStart(2, '0');
|
const hours = date.getHours().toString().padStart(2, '0');
|
const minutes = date.getMinutes().toString().padStart(2, '0');
|
const seconds = date.getSeconds().toString().padStart(2, '0');
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.common-seach-wrap {
|
padding: 20px;
|
background-color: #fff;
|
min-height: calc(100vh - 60px);
|
}
|
|
.search-left {
|
margin-bottom: 20px;
|
}
|
|
.table-container {
|
margin-top: 10px;
|
}
|
|
.dialog-footer {
|
text-align: right;
|
}
|
</style>
|
