|
@@ -0,0 +1,65 @@
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ v-model="props.modelValue" append-to-body title="编辑分类" width="400px" @close="onCancel"
|
|
|
+ >
|
|
|
+ <el-form label-width="80px" size="default" ref="form" :rules="state.rules" :model="state.categoryForm">
|
|
|
+ <el-form-item label="分类名" prop="cateName">
|
|
|
+ <el-input v-model="state.categoryForm.cateName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="父级分类">
|
|
|
+ <el-cascader
|
|
|
+ v-model="state.categoryForm.parentId"
|
|
|
+ :options="batchCateParents"
|
|
|
+ :props="{ emitPath: false, value: 'id', label: 'cateName', checkStrictly: true }"
|
|
|
+ style="width: 100%"
|
|
|
+ ></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序值" prop="sortNum">
|
|
|
+ <el-input type="number" v-model="state.categoryForm.sortNum" show-word-limit
|
|
|
+ :max="10000" :maxlength="10000" :step="1"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="pt-10" style="text-align: right">
|
|
|
+ <el-button size="small" @click="onCancel">取消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="onEditCategoryConfirm">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+import {computed, reactive, ref, watch} from "vue";
|
|
|
+import {categoryRules} from "@/util";
|
|
|
+import store from "@/store";
|
|
|
+import {categoryUpdate} from '@/api/batch';
|
|
|
+import {ElMessage} from "element-plus";
|
|
|
+const props = defineProps(['modelValue'])
|
|
|
+const emit = defineEmits(['update:modelValue'])
|
|
|
+const form = ref(null)
|
|
|
+const batchCateParents = computed(() => store.getters.batchCateParents)
|
|
|
+const state = reactive({
|
|
|
+ categoryForm: {},
|
|
|
+ rules: categoryRules('cateName', 'sortNum'),
|
|
|
+})
|
|
|
+watch(() => props.modelValue, val => {
|
|
|
+ if (val) {
|
|
|
+ state.categoryForm = {sortNum: 0, cateName: '', parentId: 0};
|
|
|
+ }
|
|
|
+})
|
|
|
+const getCategory = () => {
|
|
|
+ store.dispatch('getBatchCate');
|
|
|
+}
|
|
|
+const onCancel = () => {
|
|
|
+ emit('update:modelValue', false)
|
|
|
+}
|
|
|
+const onEditCategoryConfirm = () => {
|
|
|
+ form.value.validate(val => {
|
|
|
+ if (!val) return;
|
|
|
+ categoryUpdate(state.categoryForm).then(res => {
|
|
|
+ ElMessage({type: 'success', message: '保存成功'});
|
|
|
+ emit('update:modelValue', false)
|
|
|
+ getCategory();
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|