|
@@ -2,35 +2,85 @@
|
|
|
<div class="spec-container">
|
|
|
<!-- 顶部操作区 -->
|
|
|
<div class="operation-area">
|
|
|
- <el-button type="primary" @click="handleAdd">新建规格</el-button>
|
|
|
- <el-input
|
|
|
- v-model="searchQuery"
|
|
|
- placeholder="请输入规格编号或名称"
|
|
|
- style="width: 200px; margin-left: 16px"
|
|
|
- @keyup.enter.native="handleSearch"
|
|
|
- >
|
|
|
- <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
|
|
|
- </el-input>
|
|
|
+ <el-form :inline="true" :model="searchForm" class="search-form">
|
|
|
+ <el-form-item label="规格编号">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.pa_no"
|
|
|
+ placeholder="规格编号"
|
|
|
+ style="width: 150px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="规格名称">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.ps_name"
|
|
|
+ placeholder="规格名称"
|
|
|
+ style="width: 150px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="规格类型">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.specType"
|
|
|
+ placeholder="规格类型"
|
|
|
+ style="width: 150px"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="输入" value="输入"></el-option>
|
|
|
+ <el-option label="单选" value="单选"></el-option>
|
|
|
+ <el-option label="复选" value="复选"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属分类">
|
|
|
+ <el-select
|
|
|
+ v-model="searchForm.category"
|
|
|
+ placeholder="所属分类"
|
|
|
+ style="width: 150px"
|
|
|
+ >
|
|
|
+ <el-option label="全部" value=""></el-option>
|
|
|
+ <el-option label="LCD,LED" value="LCD,LED"></el-option>
|
|
|
+ <el-option label="DLP" value="DLP"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
|
+ <el-button @click="resetSearch">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
-
|
|
|
+ <el-button type="primary" @click="handleAdd">新建规格</el-button>
|
|
|
<!-- 表格区域 -->
|
|
|
- <el-table :data="tableData" style="width: 100%; margin-top: 20px">
|
|
|
- <el-table-column prop="pa_no" label="规格编号" width="120"></el-table-column>
|
|
|
- <el-table-column prop="ps_name" label="规格名称" width="120"></el-table-column>
|
|
|
- <el-table-column prop="specType" label="规格值类型" width="120">
|
|
|
+ <el-table :data="tableData" style="width: 100%; margin-top: 20px">
|
|
|
+ <el-table-column prop="pa_no" label="规格编号"></el-table-column>
|
|
|
+ <el-table-column prop="ps_name" label="规格名称"></el-table-column>
|
|
|
+ <!-- <el-table-column prop="specType" label="规格值类型" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag :type="scope.row.specType === '输入' ? 'primary' : scope.row.specType === '单选' ? 'success' : 'warning'">
|
|
|
+ <el-tag
|
|
|
+ :type="
|
|
|
+ scope.row.specType === '输入'
|
|
|
+ ? 'primary'
|
|
|
+ : scope.row.specType === '单选'
|
|
|
+ ? 'success'
|
|
|
+ : 'warning'
|
|
|
+ "
|
|
|
+ >
|
|
|
{{ scope.row.specType }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="specValue" label="规格值" width="180"></el-table-column>
|
|
|
- <el-table-column prop="category" label="所属分类"></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="specValue"
|
|
|
+ label="规格值"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column prop="category" label="所属分类"></el-table-column> -->
|
|
|
<el-table-column label="操作" width="250">
|
|
|
<template slot-scope="scope">
|
|
|
<el-button size="mini" @click="handleView(scope.row)">查看</el-button>
|
|
|
- <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -57,7 +107,7 @@
|
|
|
<el-form-item label="规格名称" prop="ps_name">
|
|
|
<el-input v-model="form.ps_name"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="规格值类型" prop="specType">
|
|
|
+ <!-- <el-form-item label="规格值类型" prop="specType">
|
|
|
<el-select v-model="form.specType" style="width: 100%">
|
|
|
<el-option label="输入" value="输入"></el-option>
|
|
|
<el-option label="单选" value="单选"></el-option>
|
|
@@ -65,8 +115,11 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="规格值" prop="specValue">
|
|
|
- <el-input v-model="form.specValue" type="textarea"
|
|
|
- placeholder="多个值请用逗号分隔"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="form.specValue"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="多个值请用逗号分隔"
|
|
|
+ ></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="所属分类" prop="category">
|
|
|
<el-select v-model="form.category" style="width: 100%">
|
|
@@ -74,143 +127,215 @@
|
|
|
<el-option label="LCD,LED" value="LCD,LED"></el-option>
|
|
|
<el-option label="DLP" value="DLP"></el-option>
|
|
|
</el-select>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item> -->
|
|
|
</el-form>
|
|
|
<div slot="footer">
|
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 添加查看详情对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="查看规格详情"
|
|
|
+ :visible.sync="viewDialogVisible"
|
|
|
+ width="500px"
|
|
|
+ >
|
|
|
+ <el-descriptions :column="1" border>
|
|
|
+ <el-descriptions-item label="规格编号">{{
|
|
|
+ viewForm.pa_no
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="规格名称">{{
|
|
|
+ viewForm.ps_name
|
|
|
+ }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <div slot="footer">
|
|
|
+ <el-button @click="viewDialogVisible = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import {
|
|
|
+ specList,
|
|
|
+ addSpec,
|
|
|
+ updateSpec,
|
|
|
+ getSpecDetail,
|
|
|
+} from "@/api/ProductMent/specMent";
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'SpecManagement',
|
|
|
+ name: "SpecManagement",
|
|
|
data() {
|
|
|
return {
|
|
|
- searchQuery: '',
|
|
|
- tableData: [
|
|
|
- {
|
|
|
- pa_no: 'ckb',
|
|
|
- ps_name: '长宽比',
|
|
|
- specType: '输入',
|
|
|
- specValue: '',
|
|
|
- category: '全部'
|
|
|
- },
|
|
|
- {
|
|
|
- pa_no: 'sxl',
|
|
|
- ps_name: '刷新率',
|
|
|
- specType: '单选',
|
|
|
- specValue: '75, 100, 120',
|
|
|
- category: 'LCD,LED'
|
|
|
- },
|
|
|
- {
|
|
|
- pa_no: 'pmcz',
|
|
|
- ps_name: '屏幕材质',
|
|
|
- specType: '复选',
|
|
|
- specValue: '有机玻璃, 树脂',
|
|
|
- category: 'DLP'
|
|
|
- },
|
|
|
- {
|
|
|
- pa_no: 'whfs',
|
|
|
- ps_name: '维护方式',
|
|
|
- specType: '单选',
|
|
|
- specValue: '前维护, 后维护',
|
|
|
- category: ''
|
|
|
- }
|
|
|
- ],
|
|
|
+ searchForm: {
|
|
|
+ pa_no: "",
|
|
|
+ ps_name: "",
|
|
|
+ /* specType: "",
|
|
|
+ category: "", */
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
pagination: {
|
|
|
currentPage: 1,
|
|
|
pageSize: 10,
|
|
|
- total: 4
|
|
|
+ total: 0,
|
|
|
},
|
|
|
dialogVisible: false,
|
|
|
- dialogTitle: '',
|
|
|
+ dialogTitle: "",
|
|
|
form: {
|
|
|
- pa_no: '',
|
|
|
- ps_name: '',
|
|
|
- specType: '',
|
|
|
- specValue: '',
|
|
|
- category: ''
|
|
|
+ pa_no: "",
|
|
|
+ ps_name: "",
|
|
|
+ /* specType: "",
|
|
|
+ specValue: "",
|
|
|
+ category: "", */
|
|
|
},
|
|
|
rules: {
|
|
|
- pa_no: [
|
|
|
- { required: true, message: '请输入规格编号', trigger: 'blur' }
|
|
|
- ],
|
|
|
+ pa_no: [{ required: true, message: "请输入规格编号", trigger: "blur" }],
|
|
|
ps_name: [
|
|
|
- { required: true, message: '请输入规格名称', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入规格名称", trigger: "blur" },
|
|
|
],
|
|
|
specType: [
|
|
|
- { required: true, message: '请选择规格值类型', trigger: 'change' }
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
+ { required: true, message: "请选择规格值类型", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ viewDialogVisible: false,
|
|
|
+ viewForm: {
|
|
|
+ pa_no: "",
|
|
|
+ ps_name: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
methods: {
|
|
|
handleSearch() {
|
|
|
- // 实现搜索逻辑
|
|
|
- console.log('搜索关键词:', this.searchQuery)
|
|
|
- this.loadData()
|
|
|
+ this.pagination.currentPage = 1;
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
+
|
|
|
+ resetSearch() {
|
|
|
+ this.searchForm = {
|
|
|
+ pa_no: "",
|
|
|
+ ps_name: "",
|
|
|
+ /* specType: "",
|
|
|
+ category: "", */
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: this.pagination.pageSize,
|
|
|
+ };
|
|
|
+ this.pagination.currentPage = 1;
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+
|
|
|
handleAdd() {
|
|
|
- this.dialogTitle = '新增规格'
|
|
|
+ this.dialogTitle = "新增规格";
|
|
|
this.form = {
|
|
|
- pa_no: '',
|
|
|
- ps_name: '',
|
|
|
- specType: '',
|
|
|
- specValue: '',
|
|
|
- category: ''
|
|
|
- }
|
|
|
- this.dialogVisible = true
|
|
|
+ pa_no: "",
|
|
|
+ ps_name: "",
|
|
|
+ /* specType: "",
|
|
|
+ specValue: "",
|
|
|
+ category: "", */
|
|
|
+ };
|
|
|
+ this.dialogVisible = true;
|
|
|
},
|
|
|
handleEdit(row) {
|
|
|
- this.dialogTitle = '编辑规格'
|
|
|
- this.form = { ...row }
|
|
|
- this.dialogVisible = true
|
|
|
+ this.dialogTitle = "编辑规格";
|
|
|
+ this.form = {
|
|
|
+ ps_id:row.ps_id,
|
|
|
+ pa_no: row.pa_no,
|
|
|
+ ps_name: row.ps_name,
|
|
|
+ };
|
|
|
+ this.dialogVisible = true;
|
|
|
},
|
|
|
handleDelete(row) {
|
|
|
- this.$confirm('确认删除该规格?', '提示', {
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- // 实现删除逻辑
|
|
|
- console.log('删除:', row)
|
|
|
- this.$message.success('删除成功')
|
|
|
- this.loadData()
|
|
|
- }).catch(() => {})
|
|
|
+ this.$confirm("确认删除该规格?", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ deleteSpec(row.pa_no).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ if (
|
|
|
+ this.tableData.length === 1 &&
|
|
|
+ this.pagination.currentPage > 1
|
|
|
+ ) {
|
|
|
+ this.pagination.currentPage -= 1;
|
|
|
+ }
|
|
|
+ this.loadData();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "删除失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
handleView(row) {
|
|
|
- // 实现查看逻辑
|
|
|
- console.log('查看:', row)
|
|
|
+ this.viewForm = {
|
|
|
+ pa_no: row.pa_no,
|
|
|
+ ps_name: row.ps_name,
|
|
|
+ };
|
|
|
+ this.viewDialogVisible = true;
|
|
|
},
|
|
|
handleSizeChange(val) {
|
|
|
- this.pagination.pageSize = val
|
|
|
- this.loadData()
|
|
|
+ this.pagination.pageSize = val;
|
|
|
+ this.searchForm.pageSize = val;
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
handleCurrentChange(val) {
|
|
|
- this.pagination.currentPage = val
|
|
|
- this.loadData()
|
|
|
+ this.pagination.currentPage = val;
|
|
|
+ this.searchForm.pageNum = val;
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
+ /* 新增,编辑提交 */
|
|
|
submitForm() {
|
|
|
this.$refs.form.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- // 实现表单提交逻辑
|
|
|
- console.log('表单数据:', this.form)
|
|
|
- this.dialogVisible = false
|
|
|
- this.$message.success('保存成功')
|
|
|
- this.loadData()
|
|
|
+ const api = this.dialogTitle === "新增规格" ? addSpec : updateSpec;
|
|
|
+ const message =
|
|
|
+ this.dialogTitle === "新增规格" ? "添加成功" : "更新成功";
|
|
|
+
|
|
|
+ api(this.form)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(message);
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.loadData();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "操作失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
+ /* 初始化列表 */
|
|
|
loadData() {
|
|
|
- // 实现数据加载逻辑
|
|
|
- console.log('加载数据,当前页:', this.pagination.currentPage, '每页数量:', this.pagination.pageSize)
|
|
|
- }
|
|
|
+ const params = {
|
|
|
+ ...this.searchForm,
|
|
|
+ pageNum: this.pagination.currentPage,
|
|
|
+ pageSize: this.pagination.pageSize,
|
|
|
+ };
|
|
|
+
|
|
|
+ specList(params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.tableData = res.rows || [];
|
|
|
+ this.pagination.total = res.total || 0;
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message || "获取数据失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.error("获取数据失败:", error);
|
|
|
+ this.$message.error("获取数据失败");
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
- this.loadData()
|
|
|
- }
|
|
|
-}
|
|
|
+ this.loadData();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@@ -218,7 +343,10 @@ export default {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
.operation-area {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.search-form {
|
|
|
+ margin-left: 16px;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
</style>
|