| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\product\\paramList\\paramAdd.vue?vue&type=style&index=0&id=6d09763c&lang=scss&scoped=true","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\product\\paramList\\paramAdd.vue","mtime":1761614939047},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1761614936391},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQoucnVsZXNCb3ggew0KICBkaXNwbGF5OiBmbGV4Ow0KICBhbGlnbi1pdGVtczogY2VudGVyOw0KICBmbGV4LXdyYXA6IHdyYXA7DQp9DQouYXR0ckZyb20gew0KICA6OnYtZGVlcCAuaXZ1LWZvcm0taXRlbSB7DQogICAgbWFyZ2luLWJvdHRvbTogMHB4ICFpbXBvcnRhbnQ7DQogIH0NCn0NCi5ub0Zvcm0gew0KICBtYXJnaW4tbGVmdDogMTJweDsNCn0NCi5hZGQgew0KICBtYXJnaW4tbGVmdDogMTMycHg7DQp9DQouZHJhZyB7DQogIGN1cnNvcjogbW92ZTsNCn0NCi52YWx1ZSB7DQogIGRpc3BsYXk6IGJsb2NrOw0KICBtYXJnaW46IDVweCAwOw0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIC5lbC1pY29uLWVycm9yIHsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgZGlzcGxheTogbm9uZTsNCiAgICByaWdodDogLTNweDsNCiAgICB0b3A6IC0zcHg7DQogICAgei1pbmRleDogOTsNCiAgfQ0KfQ0KLnZhbHVlOmhvdmVyIHsNCiAgLmVsLWljb24tZXJyb3Igew0KICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgIHotaW5kZXg6IDk5OTsNCiAgICBjdXJzb3I6IHBvaW50ZXI7DQogIH0NCn0NCi5tb3ZlLWljb24gew0KICB3aWR0aDogMzBweDsNCiAgY3Vyc29yOiBtb3ZlOw0KICBtYXJnaW4tcmlnaHQ6IDEwcHg7DQp9DQoubW92ZS1pY29uIC5pY29uZHJhZzIgew0KICBmb250LXNpemU6IDI2cHg7DQogIGNvbG9yOiAjYmJiOw0KfQ0KLnNwZWNpZmljYXRpb25zIHsNCiAgLnNwZWNpZmljYXRpb25zLWl0ZW06aG92ZXIgew0KICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXByZXYtYmctbWVudS1ob3Zlci1iYS1jb2xvcik7DQogIH0NCiAgLnNwZWNpZmljYXRpb25zLWl0ZW06aG92ZXIgLmRlbCB7DQogICAgZGlzcGxheTogYmxvY2s7DQogIH0NCiAgLnNwZWNpZmljYXRpb25zLWl0ZW06bGFzdC1jaGlsZCB7DQogICAgbWFyZ2luLWJvdHRvbTogMTRweDsNCiAgfQ0KICAuc3BlY2lmaWNhdGlvbnMtaXRlbSB7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICBwYWRkaW5nOiAyMHB4IDE1cHg7DQogICAgdHJhbnNpdGlvbjogYWxsIDAuMXM7DQogICAgYmFja2dyb3VuZC1jb2xvcjogI2ZhZmFmYTsNCiAgICBtYXJnaW4tYm90dG9tOiAxMHB4Ow0KICAgIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgICAuZGVsIHsNCiAgICAgIGRpc3BsYXk6IG5vbmU7DQogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICByaWdodDogMTVweDsNCiAgICAgIHRvcDogMTVweDsNCiAgICAgIGZvbnQtc2l6ZTogMjJweDsNCiAgICAgIGNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICAgICAgY3Vyc29yOiBwb2ludGVyOw0KICAgIH0NCiAgICAuc3BlY2lmaWNhdGlvbnMtaXRlbS1ib3ggew0KICAgICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgICAgLmxpbmVCb3ggew0KICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICAgIGxlZnQ6IDEzcHg7DQogICAgICAgIHRvcDogMjRweDsNCiAgICAgICAgd2lkdGg6IDMwcHg7DQogICAgICAgIGhlaWdodDogNDVweDsNCiAgICAgICAgYm9yZGVyLXJhZGl1czogNnB4Ow0KICAgICAgICBib3JkZXItbGVmdDogMXB4IHNvbGlkICNkY2RmZTY7DQogICAgICAgIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAjZGNkZmU2Ow0KICAgICAgfQ0KICAgICAgLnNwZWNpZmljYXRpb25zLWl0ZW0tbmFtZS1pbnB1dCB7DQogICAgICAgIHdpZHRoOiAyMDBweDsNCiAgICAgIH0NCiAgICB9DQogIH0NCiAgLnJ1bGVzQm94IHsNCiAgICBkaXNwbGF5OiBmbGV4Ow0KICAgIGZsZXgtd3JhcDogd3JhcDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIC5pdGVtIHsNCiAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICBmbGV4LXdyYXA6IHdyYXA7DQogICAgfQ0KICAgIC5hZGRmb250IHsNCiAgICAgIG1hcmdpbi10b3A6IDVweDsNCiAgICB9DQogICAgOjp2LWRlZXAgLmVsLXBvcG92ZXIgew0KICAgICAgYm9yZGVyOiBub25lOw0KICAgICAgYm94LXNoYWRvdzogbm9uZTsNCiAgICAgIHBhZGRpbmc6IDA7DQogICAgICBtYXJnaW4tdG9wOiA1cHg7DQogICAgICBsaW5lLWhlaWdodDogMS41Ow0KICAgIH0NCiAgfQ0KICAuYWRkZm9udCB7DQogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICBmb250LXdlaWdodDogNDAwOw0KICAgIGNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICAgIG1hcmdpbi1sZWZ0OiAxNHB4Ow0KICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgfQ0KfQ0K"},{"version":3,"sources":["paramAdd.vue"],"names":[],"mappings":";AAuPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"paramAdd.vue","sourceRoot":"src/pages/product/paramList","sourcesContent":["<template>\r\n <el-dialog :visible.sync=\"modal\" @closed=\"onCancel\" title=\"商品参数\" width=\"1000px\" v-loading=\"spinShow\">\r\n <el-form\r\n ref=\"formDynamic\"\r\n :model=\"formDynamic\"\r\n class=\"attrFrom\"\r\n label-position=\"right\"\r\n label-width=\"auto\"\r\n @submit.native.prevent\r\n >\r\n <el-row :gutter=\"24\">\r\n <el-col :span=\"24\">\r\n <el-col :span=\"8\">\r\n <el-form-item label=\"模板名称：\" prop=\"rule_name\">\r\n <el-input placeholder=\"请输入模板名称\" :maxlength=\"20\" v-model.trim=\"formDynamic.name\" />\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\">\r\n <el-col :span=\"8\">\r\n <el-form-item label=\"排序：\" prop=\"rule_name\">\r\n <el-input type=\"number\" placeholder=\"请输入排序\" :maxlength=\"20\" v-model.trim=\"formDynamic.sort\" />\r\n </el-form-item>\r\n </el-col>\r\n </el-col>\r\n <el-col :span=\"24\" class=\"noForm\" :key=\"index\">\r\n <el-form-item label=\"\">\r\n <div class=\"specifications\">\r\n <el-table ref=\"selection\" :data=\"formDynamic.value\">\r\n <el-table-column width=\"50\">\r\n <template slot-scope=\"scope\">\r\n <div class=\"drag\" @on-drag-drop=\"onDragDrop\">\r\n <img class=\"handle\" src=\"@/assets/images/drag-icon.png\" alt=\"\" />\r\n </div>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"参数名称\" min-width=\"80\">\r\n <template slot-scope=\"scope\">\r\n <el-input v-model=\"scope.row.name\"></el-input>\r\n </template>\r\n </el-table-column>\r\n <el-table-column label=\"参数值\" min-width=\"80\">\r\n <template slot-scope=\"scope\">\r\n <el-input v-model=\"scope.row.value\"></el-input>\r\n </template>\r\n </el-table-column>\r\n\r\n <el-table-column label=\"操作\" fixed=\"right\" width=\"80\">\r\n <template slot-scope=\"scope\">\r\n <a class=\"submission mr15\" v-db-click @click=\"deleteRow(scope.$index)\">删除</a>\r\n </template>\r\n </el-table-column>\r\n </el-table>\r\n <el-button\r\n v-if=\"formDynamic.value.length < 8\"\r\n type=\"primary\"\r\n class=\"submission mr15 mt20\"\r\n v-db-click\r\n @click=\"handleAddRole\"\r\n >添加参数</el-button\r\n >\r\n </div>\r\n </el-form-item>\r\n </el-col>\r\n </el-row>\r\n </el-form>\r\n <span slot=\"footer\" class=\"dialog-footer\">\r\n <el-button v-db-click @click=\"onClose\">取消</el-button>\r\n <el-button type=\"primary\" :loading=\"modal_loading\" v-db-click @click=\"handleSubmit('formDynamic')\"\r\n >确定</el-button\r\n >\r\n </span>\r\n </el-dialog>\r\n</template>\r\n\r\n<script>\r\nimport { mapState } from 'vuex';\r\nimport { paramSaveApi, paramInfoApi } from '@/api/product';\r\nimport vuedraggable from 'vuedraggable';\r\nimport Sortable from 'sortablejs';\r\nexport default {\r\n name: 'addAttr',\r\n components: {\r\n draggable: vuedraggable,\r\n },\r\n data() {\r\n return {\r\n spinShow: false,\r\n modal_loading: false,\r\n grid: {\r\n xl: 3,\r\n lg: 3,\r\n md: 12,\r\n sm: 24,\r\n xs: 24,\r\n },\r\n modal: false,\r\n index: 1,\r\n formDynamic: {\r\n id: 0,\r\n name: '',\r\n sort: 0,\r\n value: [],\r\n },\r\n attrsName: '',\r\n attrsVal: '',\r\n formDynamicNameData: [],\r\n isBtn: false,\r\n formDynamicName: [],\r\n results: [],\r\n result: [],\r\n ids: 0,\r\n };\r\n },\r\n watch: {\r\n modal(val) {\r\n if (val) {\r\n this.$nextTick(() => {\r\n this.setSort();\r\n });\r\n }\r\n },\r\n },\r\n mounted() {},\r\n methods: {\r\n setSort() {\r\n // ref一定跟table上面的ref一致\r\n const el = this.$refs.selection.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];\r\n this.sortable = Sortable.create(el, {\r\n ghostClass: 'sortable-ghost',\r\n handle: '.handle',\r\n setData: function (dataTransfer) {\r\n dataTransfer.setData('Text', '');\r\n },\r\n // 监听拖拽事件结束时触发\r\n onEnd: (evt) => {\r\n this.elChangeExForArray(evt.oldIndex, evt.newIndex, this.formDynamic.value);\r\n },\r\n });\r\n },\r\n elChangeExForArray(index1, index2, array, init) {\r\n const arr = array;\r\n const temp = array[index1];\r\n const tempt = array[index2];\r\n if (init) {\r\n arr[index2] = tempt;\r\n arr[index1] = temp;\r\n } else {\r\n arr[index1] = tempt;\r\n arr[index2] = temp;\r\n }\r\n this.formDynamic.value = [];\r\n this.$nextTick((e) => {\r\n this.formDynamic.value = arr;\r\n });\r\n },\r\n handleShowPop(index) {\r\n this.$refs['inputRef_' + index][0].focus();\r\n },\r\n handleAddRole() {\r\n let data = {\r\n name: '',\r\n value: '',\r\n };\r\n this.formDynamic.value.push(data);\r\n },\r\n onCancel() {\r\n this.ids = 0;\r\n this.clear();\r\n },\r\n onClose() {\r\n this.ids = 0;\r\n this.clear();\r\n this.modal = false;\r\n },\r\n deleteRow(index) {\r\n this.formDynamic.value.splice(index, 1);\r\n },\r\n // 添加按钮\r\n addBtn() {\r\n this.isBtn = true;\r\n },\r\n //修改排序\r\n onDragDrop(a, b) {\r\n console.log(a, b);\r\n this.formDynamic.value.splice(b, 1, ...this.formDynamic.value.splice(a, 1, this.formDynamic.value[b]));\r\n },\r\n // 详情\r\n getIofo(row) {\r\n this.ids = row.id;\r\n paramInfoApi(row.id)\r\n .then((res) => {\r\n this.formDynamic = res.data;\r\n })\r\n .catch((res) => {\r\n this.spinShow = false;\r\n this.$message.error(res.msg);\r\n });\r\n },\r\n // 提交\r\n handleSubmit(name) {\r\n this.$refs[name].validate((valid) => {\r\n if (valid) {\r\n if (this.formDynamic.value.length === 0) {\r\n return this.$message.warning('请至少添加一条商品参数！');\r\n }\r\n this.modal_loading = true;\r\n paramSaveApi(this.formDynamic)\r\n .then((res) => {\r\n this.$message.success(res.msg);\r\n setTimeout(() => {\r\n this.modal = false;\r\n this.modal_loading = false;\r\n }, 500);\r\n setTimeout(() => {\r\n this.$emit('getList');\r\n this.clear();\r\n }, 600);\r\n })\r\n .catch((res) => {\r\n this.modal_loading = false;\r\n this.$message.error(res.msg);\r\n });\r\n } else {\r\n return false;\r\n }\r\n });\r\n },\r\n clear() {\r\n this.$refs['formDynamic'].resetFields();\r\n this.formDynamic.value = [];\r\n this.formDynamic.name = '';\r\n this.formDynamic.sort = '';\r\n this.isBtn = false;\r\n this.attrsName = '';\r\n this.attrsVal = '';\r\n this.ids = 0;\r\n },\r\n // 删除\r\n handleRemove(index) {\r\n this.formDynamic.value.splice(index, 1);\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.rulesBox {\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n}\r\n.attrFrom {\r\n ::v-deep .ivu-form-item {\r\n margin-bottom: 0px !important;\r\n }\r\n}\r\n.noForm {\r\n margin-left: 12px;\r\n}\r\n.add {\r\n margin-left: 132px;\r\n}\r\n.drag {\r\n cursor: move;\r\n}\r\n.value {\r\n display: block;\r\n margin: 5px 0;\r\n position: relative;\r\n .el-icon-error {\r\n position: absolute;\r\n display: none;\r\n right: -3px;\r\n top: -3px;\r\n z-index: 9;\r\n }\r\n}\r\n.value:hover {\r\n .el-icon-error {\r\n display: block;\r\n z-index: 999;\r\n cursor: pointer;\r\n }\r\n}\r\n.move-icon {\r\n width: 30px;\r\n cursor: move;\r\n margin-right: 10px;\r\n}\r\n.move-icon .icondrag2 {\r\n font-size: 26px;\r\n color: #bbb;\r\n}\r\n.specifications {\r\n .specifications-item:hover {\r\n background-color: var(--prev-bg-menu-hover-ba-color);\r\n }\r\n .specifications-item:hover .del {\r\n display: block;\r\n }\r\n .specifications-item:last-child {\r\n margin-bottom: 14px;\r\n }\r\n .specifications-item {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n padding: 20px 15px;\r\n transition: all 0.1s;\r\n background-color: #fafafa;\r\n margin-bottom: 10px;\r\n border-radius: 4px;\r\n .del {\r\n display: none;\r\n position: absolute;\r\n right: 15px;\r\n top: 15px;\r\n font-size: 22px;\r\n color: var(--prev-color-primary);\r\n cursor: pointer;\r\n }\r\n .specifications-item-box {\r\n position: relative;\r\n .lineBox {\r\n position: absolute;\r\n left: 13px;\r\n top: 24px;\r\n width: 30px;\r\n height: 45px;\r\n border-radius: 6px;\r\n border-left: 1px solid #dcdfe6;\r\n border-bottom: 1px solid #dcdfe6;\r\n }\r\n .specifications-item-name-input {\r\n width: 200px;\r\n }\r\n }\r\n }\r\n .rulesBox {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n .item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n }\r\n .addfont {\r\n margin-top: 5px;\r\n }\r\n ::v-deep .el-popover {\r\n border: none;\r\n box-shadow: none;\r\n padding: 0;\r\n margin-top: 5px;\r\n line-height: 1.5;\r\n }\r\n }\r\n .addfont {\r\n display: inline-block;\r\n font-size: 12px;\r\n font-weight: 400;\r\n color: var(--prev-color-primary);\r\n margin-left: 14px;\r\n cursor: pointer;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
