feat: 商品规格功能调整

src/views/product/specifications.vue

@@ -22,15 +22,71 @@
           <el-text>{{ scope.row[scope.prop] }}</el-text>
           <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
         </template>
+        <template #operates="scope">
+          <el-button type="text" size="small" v-if="scope.row.level < 3"
+            @click="addlowerLevel(scope.row)">添加下一级</el-button>
+          <el-button type="text" size="small" @click="handleEditClick(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
+        </template>
       </page-content>
-
+      <!-- 添加下一级-编辑 -->
+      <myDialog title="添加模板" width="50%" ref="myDialogRefs" @Confirm="subitgoods">
+        <el-form ref="forms" :model="datas.contentForm" :rules="datas.rules" label-width="80px" label-position="left">
+          <el-form-item label="规格名称" prop="name">
+            <el-input v-model="datas.contentForm.name" placeholder="请输入下一级名称"></el-input>
+          </el-form-item>
+        </el-form>
+      </myDialog>
       <!-- 新增 -->
-      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <!-- <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
         <template #gender="scope">
           <Dict v-model="scope.formData[scope.prop]" code="gender" />
         </template>
-      </page-modal>
-
+      </page-modal> -->
+      <myDialog title="新增模板" width="50%" ref="myDialogRef" @Confirm="subitgood">
+        <el-form ref="form" :model="datas.contentForm" :rules="datas.rules" label-width="80px" label-position="left">
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="datas.contentForm.name" placeholder="模板名称，如：衣服"></el-input>
+          </el-form-item>
+          <el-form-item :label="item.name" v-for="(item, index) in datas.contentForm.children" :key="index">
+            <div class="tag_wrap">
+              <el-tag v-for="(val, i) in item.children" :key="i" closable size="medium" :disable-transitions="true"
+                @close="handleClose(index, i)">
+                {{ val.name }}
+              </el-tag>
+              <el-input class="input-new-tag" v-show="item.inputVisible" v-model="item.inputValue" ref="saveTagInput"
+                size="small" placeholder="请输入规格值，回车添加" @keyup.enter.native="handleInputConfirm(index)"
+                @blur="handleInputConfirm(index)">
+              </el-input>
+              <el-button v-show="!item.inputVisible" size="small" icon="Plus" plain @click="showInput(index)">
+                添加
+              </el-button>
+              <el-button size="small" icon="Delete" plain @click="deleteTag(index)">删除</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+        <el-form ref="skuForm" :model="datas.skuForm" :rules="datas.skuRules" label-width="80px" label-position="left">
+          <el-row :gutter="20" v-if="datas.showSkuForm">
+            <el-col :span="10">
+              <el-form-item label="规格" prop="skuValidate1">
+                <el-input v-model="datas.skuForm.label" placeholder="规格，如：尺码"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="规格值" prop="skuValidate2">
+                <el-input v-model="datas.skuForm.value" placeholder="规格值，如：S、M"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" @click="addSkuSubmit">添加</el-button>
+              <el-button @click="datas.showSkuForm = false">取消</el-button>
+            </el-col>
+          </el-row>
+          <el-form-item>
+            <el-button type="primary" icon="Plus" @click="datas.showSkuForm = true">添加规格</el-button>
+          </el-form-item>
+        </el-form>
+      </myDialog>
       <!-- 编辑 -->
       <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
         <template #gender="scope">
@@ -60,7 +116,21 @@ import contentConfig from "./specificationsconfig/content";
 import contentConfig2 from "./specificationsconfig/content2";
 import editModalConfig from "./specificationsconfig/edit";
 import searchConfig from "./specificationsconfig/search";
-
+import { pid } from "process";
+const validateSku1 = (rule, value, callback) => {
+  if (!datas.skuForm.label) {
+    callback(new Error(' '))
+  } else {
+    callback()
+  }
+}
+const validateSku2 = (rule, value, callback) => {
+  if (!datas.skuForm.value) {
+    callback(new Error(' '))
+  } else {
+    callback()
+  }
+}
 const {
   searchRef,
   contentRef,
@@ -75,9 +145,147 @@ const {
   handleSearchClick,
   handleFilterChange,
 } = usePage();
+// refs
+const skuForm = ref(null)
+const myDialogRefs = ref(null)
+const forms = ref(null)
 
+let datas = reactive({
+  contentForm: {
+    name: '',
+    children: [],
+  },
+  skuForm: {
+    label: '', value: ''
+  },
+  rules: {
+    name: [
+      {
+        required: true,
+        message: ' ',
+        trigger: 'blur'
+      }
+    ]
+  },
+
+  skuRules: {
+    skuValidate1: {
+      required: true,
+      validator: validateSku1,
+      trigger: 'blur'
+    },
+    skuValidate2: {
+      required: true,
+      validator: validateSku2,
+      trigger: 'blur'
+    }
+  },
+  showSkuForm: false,
+  addchilderinfo: {}
+})
+let myDialogRef = ref(null)
+function subitgood() {
+  skuForm.value.validate(async valid => {
+    if (valid) {
+      let res = await UserAPI.quickAdd(datas.contentForm)
+      if (res.code == 200) {
+        ElMessage.success("添加成功");
+        handleQueryClick();
+        datas.contentForm.name = ''
+        datas.contentForm.children = []
+        myDialogRef.value?.close();
+
+      }
+    }
+  })
+}
+function subitgoods() {
+  forms.value.validate(async valid => {
+    if (valid) {
+      let obj = {
+        name: datas.contentForm.name,
+        level: datas.addchilderinfo.level < 3 ? (datas.addchilderinfo.level + 1) : 3,
+        pid: datas.addchilderinfo.id
+      }
+      let res = await UserAPI.addunit(obj)
+      if (res.code == 200) {
+        ElMessage.success("添加成功");
+        myDialogRefs.value.close()
+        handleQueryClick();
+        datas.contentForm.name = ''
+      }
+    }
+  })
+}
+function handleClose(index: any, i: any) {
+  datas.contentForm.children[index].value.splice(i, 1);
+}
+function showInput(index: any) {
+  datas.contentForm.children[index].inputVisible = true;
+}
+function addSkuSubmit() {
+  skuForm.value.validate(async valid => {
+    if (valid) {
+      datas.contentForm.children.push({
+        name: datas.skuForm.label,
+        children: [{ name: datas.skuForm.value }],
+        inputVisible: false,
+        inputValue: ''
+      })
+      datas.skuForm.label = ''
+      datas.skuForm.value = ''
+      datas.showSkuForm = false
+    }
+  })
+}
+// 回车添加
+function handleInputConfirm(index: number) {
+  let inputValue = datas.contentForm.children[index].inputValue;
+  if (inputValue) {
+    datas.contentForm.children[index].children.push({ name: inputValue });
+  }
+  datas.contentForm.children[index].inputVisible = false;
+  datas.contentForm.children[index].inputValue = '';
+}
+// 删除
+// 删除已添加的规格
+function deleteTag(index: number) {
+  datas.contentForm.children.splice(index, 1);
+}
+// 添加下一级
+async function addlowerLevel(item: any) {
+  datas.addchilderinfo = item
+  myDialogRefs.value.open()
+  // addModalRef.value?.setModalVisible();
+  // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+}
+// function handleEditClicks(item: any) {
+//   console.log(item)
+// }
+function deleteClick(item: any) {
+
+  const ids = [item.id].join(",");
+  if (!ids) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    contentConfig.deleteAction(ids).then(() => {
+      ElMessage.success("删除成功");
+      handleQueryClick();
+    });
+
+  });
+
+}
 // 新增
 async function handleAddClick() {
+  myDialogRef.value?.open();
   addModalRef.value?.setModalVisible();
   // 加载上级规格下拉数据源 
   addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
@@ -88,8 +296,19 @@ async function handleAddClick() {
 async function handleEditClick(row: IObject) {
   editModalRef.value?.handleDisabled(false);
   // 加载部门下拉数据源
-  editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
-  // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  editModalConfig.formItems[2]!.attrs!.data = [{
+    createTime: "",
+    fullName: "顶级",
+    id: "0", level: 1,
+    name: "顶级",
+    pid: "0",
+    pids: "0,",
+    shopId: "1",
+    sort: 1,
+    status: 1,
+    updateTime: "",
+    children: await UserAPI.getPage({ name: "" })
+  }]
   // 加载角色下拉数据源
   // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
   // 根据id获取数据进行填充
@@ -143,3 +362,17 @@ async function handleOperatClick(data: IOperatData) {
 // 切换示例
 const isA = ref(true);
 </script>
+
+<style scoped lang="scss">
+.tag_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.input-new-tag {
+  width: 180px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>