index.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <template>
  2. <div class="spec-container">
  3. <!-- 顶部操作区 -->
  4. <div class="operation-area">
  5. <el-form :inline="true" :model="searchForm" class="search-form">
  6. <el-form-item label="规格编号">
  7. <el-input
  8. v-model="searchForm.pa_no"
  9. placeholder="规格编号"
  10. style="width: 150px"
  11. ></el-input>
  12. </el-form-item>
  13. <el-form-item label="规格名称">
  14. <el-input
  15. v-model="searchForm.ps_name"
  16. placeholder="规格名称"
  17. style="width: 150px"
  18. ></el-input>
  19. </el-form-item>
  20. <!-- <el-form-item label="规格类型">
  21. <el-select
  22. v-model="searchForm.specType"
  23. placeholder="规格类型"
  24. style="width: 150px"
  25. >
  26. <el-option label="全部" value=""></el-option>
  27. <el-option label="输入" value="输入"></el-option>
  28. <el-option label="单选" value="单选"></el-option>
  29. <el-option label="复选" value="复选"></el-option>
  30. </el-select>
  31. </el-form-item>
  32. <el-form-item label="所属分类">
  33. <el-select
  34. v-model="searchForm.category"
  35. placeholder="所属分类"
  36. style="width: 150px"
  37. >
  38. <el-option label="全部" value=""></el-option>
  39. <el-option label="LCD,LED" value="LCD,LED"></el-option>
  40. <el-option label="DLP" value="DLP"></el-option>
  41. </el-select>
  42. </el-form-item> -->
  43. <el-form-item>
  44. <el-button type="primary" @click="handleSearch">搜索</el-button>
  45. <el-button @click="resetSearch">重置</el-button>
  46. </el-form-item>
  47. </el-form>
  48. </div>
  49. <el-button type="primary" @click="handleAdd">新建规格</el-button>
  50. <!-- 表格区域 -->
  51. <el-table :data="tableData" style="width: 100%; margin-top: 20px">
  52. <el-table-column prop="pa_no" label="规格编号"></el-table-column>
  53. <el-table-column prop="ps_name" label="规格名称"></el-table-column>
  54. <!-- <el-table-column prop="specType" label="规格值类型" width="120">
  55. <template slot-scope="scope">
  56. <el-tag
  57. :type="
  58. scope.row.specType === '输入'
  59. ? 'primary'
  60. : scope.row.specType === '单选'
  61. ? 'success'
  62. : 'warning'
  63. "
  64. >
  65. {{ scope.row.specType }}
  66. </el-tag>
  67. </template>
  68. </el-table-column>
  69. <el-table-column
  70. prop="specValue"
  71. label="规格值"
  72. width="180"
  73. ></el-table-column>
  74. <el-table-column prop="category" label="所属分类"></el-table-column> -->
  75. <el-table-column label="操作" width="250">
  76. <template slot-scope="scope">
  77. <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
  78. <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
  79. >编辑</el-button
  80. >
  81. <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
  82. >删除</el-button
  83. >
  84. </template>
  85. </el-table-column>
  86. </el-table>
  87. <!-- 分页 -->
  88. <el-pagination
  89. @size-change="handleSizeChange"
  90. @current-change="handleCurrentChange"
  91. :current-page="pagination.currentPage"
  92. :page-sizes="[10, 20, 50, 100]"
  93. :page-size="pagination.pageSize"
  94. layout="total, sizes, prev, pager, next, jumper"
  95. :total="pagination.total"
  96. style="margin-top: 20px; text-align: right"
  97. >
  98. </el-pagination>
  99. <!-- 新增/编辑对话框 -->
  100. <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
  101. <el-form :model="form" :rules="rules" ref="form" label-width="100px">
  102. <el-form-item label="规格编号" prop="pa_no">
  103. <el-input v-model="form.pa_no"></el-input>
  104. </el-form-item>
  105. <el-form-item label="规格名称" prop="ps_name">
  106. <el-input v-model="form.ps_name"></el-input>
  107. </el-form-item>
  108. <!-- <el-form-item label="规格值类型" prop="specType">
  109. <el-select v-model="form.specType" style="width: 100%">
  110. <el-option label="输入" value="输入"></el-option>
  111. <el-option label="单选" value="单选"></el-option>
  112. <el-option label="复选" value="复选"></el-option>
  113. </el-select>
  114. </el-form-item>
  115. <el-form-item label="规格值" prop="specValue">
  116. <el-input
  117. v-model="form.specValue"
  118. type="textarea"
  119. placeholder="多个值请用逗号分隔"
  120. ></el-input>
  121. </el-form-item>
  122. <el-form-item label="所属分类" prop="category">
  123. <el-select v-model="form.category" style="width: 100%">
  124. <el-option label="全部" value="全部"></el-option>
  125. <el-option label="LCD,LED" value="LCD,LED"></el-option>
  126. <el-option label="DLP" value="DLP"></el-option>
  127. </el-select>
  128. </el-form-item> -->
  129. </el-form>
  130. <div slot="footer">
  131. <el-button @click="dialogVisible = false">取 消</el-button>
  132. <el-button type="primary" @click="submitForm">确 定</el-button>
  133. </div>
  134. </el-dialog>
  135. <!-- 添加查看详情对话框 -->
  136. <el-dialog
  137. title="查看规格详情"
  138. :visible.sync="viewDialogVisible"
  139. width="500px"
  140. >
  141. <el-descriptions :column="1" border>
  142. <el-descriptions-item label="规格编号">{{
  143. viewForm.pa_no
  144. }}</el-descriptions-item>
  145. <el-descriptions-item label="规格名称">{{
  146. viewForm.ps_name
  147. }}</el-descriptions-item>
  148. </el-descriptions>
  149. <div slot="footer">
  150. <el-button @click="viewDialogVisible = false">关闭</el-button>
  151. </div>
  152. </el-dialog>
  153. </div>
  154. </template>
  155. <script>
  156. import {
  157. specList,
  158. addSpec,
  159. updateSpec,
  160. getSpecDetail,
  161. } from "@/api/ProductMent/specMent";
  162. export default {
  163. name: "SpecManagement",
  164. data() {
  165. return {
  166. searchForm: {
  167. pa_no: "",
  168. ps_name: "",
  169. /* specType: "",
  170. category: "", */
  171. pageNum: 1,
  172. pageSize: 10,
  173. },
  174. tableData: [],
  175. pagination: {
  176. currentPage: 1,
  177. pageSize: 10,
  178. total: 0,
  179. },
  180. dialogVisible: false,
  181. dialogTitle: "",
  182. form: {
  183. pa_no: "",
  184. ps_name: "",
  185. /* specType: "",
  186. specValue: "",
  187. category: "", */
  188. },
  189. rules: {
  190. pa_no: [{ required: true, message: "请输入规格编号", trigger: "blur" }],
  191. ps_name: [
  192. { required: true, message: "请输入规格名称", trigger: "blur" },
  193. ],
  194. specType: [
  195. { required: true, message: "请选择规格值类型", trigger: "change" },
  196. ],
  197. },
  198. viewDialogVisible: false,
  199. viewForm: {
  200. pa_no: "",
  201. ps_name: "",
  202. },
  203. };
  204. },
  205. methods: {
  206. handleSearch() {
  207. this.pagination.currentPage = 1;
  208. this.loadData();
  209. },
  210. resetSearch() {
  211. this.searchForm = {
  212. pa_no: "",
  213. ps_name: "",
  214. /* specType: "",
  215. category: "", */
  216. pageNum: 1,
  217. pageSize: this.pagination.pageSize,
  218. };
  219. this.pagination.currentPage = 1;
  220. this.loadData();
  221. },
  222. handleAdd() {
  223. this.dialogTitle = "新增规格";
  224. this.form = {
  225. pa_no: "",
  226. ps_name: "",
  227. /* specType: "",
  228. specValue: "",
  229. category: "", */
  230. };
  231. this.dialogVisible = true;
  232. },
  233. handleEdit(row) {
  234. this.dialogTitle = "编辑规格";
  235. this.form = {
  236. ps_id:row.ps_id,
  237. pa_no: row.pa_no,
  238. ps_name: row.ps_name,
  239. };
  240. this.dialogVisible = true;
  241. },
  242. handleDelete(row) {
  243. this.$confirm("确认删除该规格?", "提示", {
  244. type: "warning",
  245. })
  246. .then(() => {
  247. deleteSpec(row.pa_no).then((res) => {
  248. if (res.code === 200) {
  249. this.$message.success("删除成功");
  250. if (
  251. this.tableData.length === 1 &&
  252. this.pagination.currentPage > 1
  253. ) {
  254. this.pagination.currentPage -= 1;
  255. }
  256. this.loadData();
  257. } else {
  258. this.$message.error(res.message || "删除失败");
  259. }
  260. });
  261. })
  262. .catch(() => {});
  263. },
  264. handleView(row) {
  265. this.viewForm = {
  266. pa_no: row.pa_no,
  267. ps_name: row.ps_name,
  268. };
  269. this.viewDialogVisible = true;
  270. },
  271. handleSizeChange(val) {
  272. this.pagination.pageSize = val;
  273. this.searchForm.pageSize = val;
  274. this.loadData();
  275. },
  276. handleCurrentChange(val) {
  277. this.pagination.currentPage = val;
  278. this.searchForm.pageNum = val;
  279. this.loadData();
  280. },
  281. /* 新增,编辑提交 */
  282. submitForm() {
  283. this.$refs.form.validate((valid) => {
  284. if (valid) {
  285. const api = this.dialogTitle === "新增规格" ? addSpec : updateSpec;
  286. const message =
  287. this.dialogTitle === "新增规格" ? "添加成功" : "更新成功";
  288. api(this.form)
  289. .then((res) => {
  290. if (res.code === 200) {
  291. this.$message.success(message);
  292. this.dialogVisible = false;
  293. this.loadData();
  294. } else {
  295. this.$message.error(res.message || "操作失败");
  296. }
  297. })
  298. .catch(() => {
  299. this.$message.error("操作失败");
  300. });
  301. }
  302. });
  303. },
  304. /* 初始化列表 */
  305. loadData() {
  306. const params = {
  307. ...this.searchForm,
  308. pageNum: this.pagination.currentPage,
  309. pageSize: this.pagination.pageSize,
  310. };
  311. specList(params)
  312. .then((res) => {
  313. if (res.code === 200) {
  314. this.tableData = res.rows || [];
  315. this.pagination.total = res.total || 0;
  316. } else {
  317. this.$message.error(res.message || "获取数据失败");
  318. }
  319. })
  320. .catch((error) => {
  321. console.error("获取数据失败:", error);
  322. this.$message.error("获取数据失败");
  323. });
  324. },
  325. },
  326. created() {
  327. this.loadData();
  328. },
  329. };
  330. </script>
  331. <style scoped>
  332. .spec-container {
  333. padding: 20px;
  334. }
  335. .operation-area {
  336. margin-bottom: 20px;
  337. }
  338. .search-form {
  339. margin-left: 16px;
  340. display: inline-block;
  341. }
  342. </style>