|
|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
|
|
|
+ <el-form-item label="类型名称" prop="deptName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.deptName"
|
|
|
+ placeholder="请输入类型名称"
|
|
|
+ clearable
|
|
|
+ style="width: 200px"
|
|
|
+ @keyup.enter="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form> -->
|
|
|
+
|
|
|
+ <!-- <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="Plus"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row> -->
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-if="refreshTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="deptList"
|
|
|
+ row-key="id"
|
|
|
+ :default-expand-all="isExpandAll"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ >
|
|
|
+ <el-table-column prop="businessName" label="分类名称" width="260"></el-table-column>
|
|
|
+ <el-table-column prop="businessName" label="分类图片" width="260">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-image style="width: 100px; height: 100px" :src="scope.row.businessIcon" fit="fill" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" >修改</el-button>
|
|
|
+ <!-- <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" >新增</el-button> -->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 添加或修改分类对话框 -->
|
|
|
+ <el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
|
|
+ <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-row>
|
|
|
+ <!-- <el-col :span="24" v-if="form.parentId !== '0'">
|
|
|
+ <el-form-item label="上级分类" prop="parentId">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="form.parentId"
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="{ value: 'id', label: 'businessName', children: 'children' }"
|
|
|
+ value-key="parentId"
|
|
|
+ placeholder="选择上级分类"
|
|
|
+ check-strictly
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="分类名称" prop="businessName">
|
|
|
+ <el-input v-model="form.businessName" placeholder="请输入类型名称" disabled="true" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="分类图片" prop=" ">
|
|
|
+ <FileUpload :fileType="['png', 'jpg', 'jpeg']" model="avatarCard" @update:modelValue="fileUpdata" :modelValue="files"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="Dept">
|
|
|
+import { listClass, updateClass } from "@/api/system/classification";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
|
|
|
+
|
|
|
+const deptList = ref([]);
|
|
|
+const open = ref(false);
|
|
|
+const loading = ref(true);
|
|
|
+const showSearch = ref(true);
|
|
|
+const title = ref("");
|
|
|
+const deptOptions = ref([]);
|
|
|
+const isExpandAll = ref(true);
|
|
|
+const refreshTable = ref(true);
|
|
|
+const files = ref('');
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ form: {},
|
|
|
+ queryParams: {
|
|
|
+ deptName: undefined,
|
|
|
+ status: undefined
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ parentId: [{ required: true, message: "上级分类不能为空", trigger: "blur" }],
|
|
|
+ businessName: [{ required: true, message: "类型名称不能为空", trigger: "blur" }],
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const { queryParams, form, rules } = toRefs(data);
|
|
|
+
|
|
|
+/** 查询分类列表 */
|
|
|
+function getList() {
|
|
|
+ loading.value = true;
|
|
|
+ listClass(queryParams.value).then(response => {
|
|
|
+ deptList.value = proxy.handleTree(response.data, "id");
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+function cancel() {
|
|
|
+ open.value = false;
|
|
|
+ reset();
|
|
|
+}
|
|
|
+
|
|
|
+/** 表单重置 */
|
|
|
+function reset() {
|
|
|
+ form.value = {
|
|
|
+ deptId: undefined,
|
|
|
+ parentId: undefined,
|
|
|
+ deptName: undefined,
|
|
|
+ orderNum: 0,
|
|
|
+ leader: undefined,
|
|
|
+ phone: undefined,
|
|
|
+ email: undefined,
|
|
|
+ status: "0"
|
|
|
+ };
|
|
|
+ proxy.resetForm("deptRef");
|
|
|
+}
|
|
|
+
|
|
|
+/** 搜索按钮操作 */
|
|
|
+function handleQuery() {
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置按钮操作 */
|
|
|
+function resetQuery() {
|
|
|
+ proxy.resetForm("queryRef");
|
|
|
+ handleQuery();
|
|
|
+}
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+function handleAdd(row) {
|
|
|
+ reset();
|
|
|
+ deptOptions.value = deptList.value;
|
|
|
+ if (row != undefined) {
|
|
|
+ form.value.parentId = row.deptId;
|
|
|
+ }
|
|
|
+ open.value = true;
|
|
|
+ title.value = "添加分类";
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+function handleUpdate(row) {
|
|
|
+ console.log('修改按钮操作',row);
|
|
|
+ reset();
|
|
|
+ deptOptions.value = deptList.value;
|
|
|
+ form.value = row;
|
|
|
+ open.value = true;
|
|
|
+ title.value = "修改分类";
|
|
|
+ files.value = row.businessIcon;
|
|
|
+}
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+function submitForm() {
|
|
|
+ proxy.$refs["deptRef"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('form.value',form.value,files.value);
|
|
|
+ const parmas = {
|
|
|
+ businessManagementId: form.value.id,
|
|
|
+ businessIcon:files.value
|
|
|
+ }
|
|
|
+ console.log('parmas',parmas);
|
|
|
+
|
|
|
+ if (parmas.businessManagementId) {
|
|
|
+ updateClass(parmas).then(response => {
|
|
|
+ proxy.$modal.msgSuccess("修改成功");
|
|
|
+ open.value = false;
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 删除按钮操作 */
|
|
|
+function handleDelete(row) {
|
|
|
+ proxy.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?').then(function() {
|
|
|
+ // return delDept(row.deptId);
|
|
|
+ }).then(() => {
|
|
|
+ getList();
|
|
|
+ proxy.$modal.msgSuccess("删除成功");
|
|
|
+ }).catch(() => {});
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const fileUpdata = (file) => {
|
|
|
+ const f = file.split(',')
|
|
|
+ console.log(file);
|
|
|
+ files.value = f[f.length-1];
|
|
|
+ console.log(' files.value', files.value);
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+getList();
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
chenjj