php/houde_web_back
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:完成产品管理-产品类型模块

Browse Source
This commit is contained in:
xjh 2023-04-18 11:28:41 +08:00
parent 80e517ea77
commit 3212142d8f
5 changed files with 671 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/pages/index/works/works_type/components/AddWorksTypeDialog.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<el-dialog v-model="dialogVisible" title="添加作品类型" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上级菜单" prop="works_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'works_type_guid', label: 'works_type_name', emitPath: false }"
placeholder="请选择上级菜单" clearable v-model="formData.works_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.works_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="类型名称" prop="works_type_name">
<el-input v-model='formData.works_type_name' type="text" placeholder='请输入作品类型名称'></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="类型排序" prop="works_type_order">
<el-input-number v-model='formData.works_type_order' controls-position="right"
@change="handleEditProductType(scope.row)"></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleAddClick(formRef)" :loading="isBtnLod">添加</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { addWorksType, getWorksTypeList } from "~/service/works_type";
import { useLoginStore } from "~/store";
// --业务参数
// --业务方法
const dataList = ref();
async function getList() {
getWorksTypeList().then((res) => {
if (res.code == 0) {
dataList.value = res.data
}
})
}
// --基础参数
const store = useLoginStore();
const headers = {
Accept: "application/json",
...store.headers,
};
const formRef = ref();
const labelWidth = 90;
const props = defineProps({
modelValue: Boolean,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const dialogVisible = ref(props.modelValue);
const formData = reactive({
works_type_order: 0,
works_type_parent_guid: '0',
});
const uoloadData = ref({
dirName: "WorksType"
})
watch(props, (v) => {
dialogVisible.value = v.modelValue;
});
const rules = reactive({
works_type_name: [
{
required: true,
message: '作品类型名称不能为空'
}
],
works_type_order: [
{
required: true,
message: '作品类型排序不能为空'
}
],
});
// --基础方法
// 打开弹窗时执行
const openDialog = () => {
getList()
};
const closeDialog = () => {
handleResetClick(formRef.value);
dialogVisible.value = false;
emits("update:modelValue", false);
};
const isBtnLod = ref(false);
const handleAddClick = async (formEl) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
isBtnLod.value = true;
const { code } = await addWorksType(formData);
if (code == 0) {
closeDialog();
props.done();
}
isBtnLod.value = true;
});
};
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
<style lang="less" scoped></style>

91
src/pages/index/works/works_type/components/DetailWorksTypeDialog.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<el-dialog v-model="props.modelValue" title="作品类型详情" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :disabled="true">
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上级菜单" prop="works_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'works_type_guid', label: 'works_type_name', emitPath: false }"
placeholder="无" clearable v-model="formData.works_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.works_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="作品类型名称" prop="works_type_name">
<el-input v-model='formData.works_type_name' type="text" placeholder='请输入作品类型名称'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="作品类型排序" prop="works_type_order">
<el-input v-model='formData.works_type_order' type="text" placeholder='请输入作品类型排序'></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { isEmptyObject } from "~/utils/index";
import { getWorksTypeList } from "~/service/works_type";
// --业务参数
// --业务方法
const dataList = ref();
async function getList() {
getWorksTypeList().then((res) => {
if (res.code == 0) {
dataList.value = res.data
}
})
}
// --基础参数
const formRef = ref();
const labelWidth = 100;
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const formData = ref({
...props.data,
});
// --基础方法
watch(props, (v) => {
formData.value = v.data;
});
// 打开弹窗时执行
const openDialog = () => {
getList()
};
const closeDialog = () => {
emits("update:modelValue", false);
};
</script>
<style lang="less" scoped></style>

139
src/pages/index/works/works_type/components/EditWorksTypeDialog.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<el-dialog v-model="props.modelValue" title="编辑作品类型" width="900px" @closed="closeDialog" @open="openDialog">
<el-form ref="formRef" :model="formData" :rules="rules">
<el-row>
<el-col :lg="24">
<el-form-item :label-width="labelWidth" label="上级菜单" prop="works_type_parent_guid">
<el-cascader class="w100" filterable :options="dataList"
:props="{ checkStrictly: true, value: 'works_type_guid', label: 'works_type_name', emitPath: false }"
placeholder="请选择上级菜单" clearable v-model="formData.works_type_parent_guid">
<template #default="{ node, data }">
<span>{{ data.works_type_name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="类型名称" prop="works_type_name">
<el-input v-model='formData.works_type_name' type="text" placeholder='请输入作品类型名称'></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item :label-width="labelWidth" label="类型排序" prop="works_type_order">
<el-input v-model='formData.works_type_order' type="text" placeholder='请输入作品类型排序'></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleEditClick(formRef)" :loading="isBtnLod">编辑</el-button>
<el-button @click="handleResetClick(formRef)">重置</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { editWorksType, getWorksTypeList } from "~/service/works_type";
import { useLoginStore } from "~/store";
// --业务参数
// --业务方法
const dataList = ref();
async function getList() {
getWorksTypeList().then((res) => {
if (res.code == 0) {
dataList.value = res.data
}
})
}
// --基础参数
const store = useLoginStore();
const headers = {
Accept: "application/json",
...store.headers,
};
const formRef = ref();
const labelWidth = 100;
const props = defineProps({
modelValue: Boolean,
data: Object,
done: Function,
});
const emits = defineEmits(["update:modelValue"]);
const formData = ref({
...props.data,
});
const uoloadData = ref({
dirName: "WorksType"
})
// --基础方法
watch(props, (v) => {
formData.value = v.data;
});
// 打开弹窗时执行
const openDialog = () => {
getList()
};
const closeDialog = () => {
props.done();
emits("update:modelValue", false);
};
const rules = reactive({
works_type_name: [
{
required: true,
message: '作品类型名称不能为空'
}
],
works_type_order: [
{
required: true,
message: '作品类型排序不能为空'
}
],
});
const isBtnLod = ref(false);
const handleEditClick = async (formEl) => {
if (!formEl) return;
formEl.validate(async (valid) => {
if (!valid) {
return;
}
isBtnLod.value = true;
const { code } = await editWorksType(formData.value);
if (code == 0) {
closeDialog();
props.done();
}
isBtnLod.value = false;
});
};
const handleResetClick = async (formEl) => {
if (!formEl) return;
formEl.resetFields();
};
</script>
<style lang="less" scoped></style>

217
src/pages/index/works/works_type/index.vue Normal file
View File

@ -0,0 +1,217 @@
<template>
<!-- 面包屑 -->
<el-breadcrumb>
<el-breadcrumb-item>作品管理</el-breadcrumb-item>
<el-breadcrumb-item to="/product_type/list">作品类型</el-breadcrumb-item>
</el-breadcrumb>
<!-- 搜索 -->
<el-form inline :model="params">
<el-form-item label="作品类型">
<el-input v-model='params.works_type_name' placeholder='请输入作品类型名称'></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList()" icon="ElIconSearch">
搜索
</el-button>
</el-form-item>
</el-form>
<el-space style="margin-bottom: 10px;">
<!-- 添加作品类型 -->
<el-col :span="1">
<el-button type="primary" @click="addWorksTypeDialogVisible = true"> 添加 </el-button>
</el-col>
<!-- 导出 -->
<el-button icon="ElIconDocument"
@click="exportExcel({works_type_guids: selectionData.map(v => v.works_type_guid).join()})">导出</el-button>
<!-- 导入 -->
<el-upload class="upload-demo" :action="importExcel" :headers="headers" :on-success="handleExcelSuccess"
:on-progress="uploadLoading" :on-error="closeUploadLoading" style="margin-left: 10px" :show-file-list="false">
<el-button type="primary">导入</el-button>
</el-upload>
<!-- 下载导入模板 -->
<el-button icon="ElIconDownload" @click="downloadTemplate()">下载导入模板</el-button>
<!-- 下拉操作 -->
<el-dropdown v-if="selectionData.length">
<el-button type="primary">
批量操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handleDelete(selectionData)">
批量删除
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-space>
<!-- 数据表格 -->
<el-table v-loading="loading" :data="dataList" ref="tableRef" border highlight-current-row
:onSelectionChange="data => (selectionData = data)" :default-expand-all="tableExpandAll" row-key="works_type_guid"
:tree-props="{ children: 'children' }">
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="works_type_name" width="200" label="作品类型名称" :show-overflow-tooltip="true"> </el-table-column>
<el-table-column prop="works_type_order" width="200" label="排序" sort>
<template #default="scope">
<el-input-number v-model='scope.row.works_type_order' controls-position="right"
@change="handleEditOrder(scope.row)"></el-input-number>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="250" fixed='right'>
<template #default="scope">
<el-button size="small" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete([scope.row])">删除</el-button>
<el-button size="small" type="info" @click="handleDetail(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加作品类型 -->
<AddWorksTypeDialog v-model="addWorksTypeDialogVisible" :done="() => getList()"></AddWorksTypeDialog>
<!-- 编辑作品类型 -->
<EditWorksTypeDialog v-model="EditWorksTypeDialogVisible" :data="EditWorksTypeDialogRow" :done="() => getList()">
</EditWorksTypeDialog>
<!-- 作品类型详情 -->
<DetailWorksTypeDialog v-model="DetailWorksTypeDialogVisible" :data="DetailWorksTypeDialogRow"></DetailWorksTypeDialog>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive, onMounted, watch } from 'vue';
import { useLoginStore } from "~/store";
// import { getProductTypeTree, editProductType, deleteProductType, exportExcel, downloadTemplate, importExcel } from '~/service/product_type';
import { getWorksTypeList, editWorksType, deleteWorksType, exportExcel, downloadTemplate, importExcel } from '~/service/works_type';
import AddWorksTypeDialog from './components/AddWorksTypeDialog.vue';
import EditWorksTypeDialog from './components/EditWorksTypeDialog.vue';
import DetailWorksTypeDialog from './components/DetailWorksTypeDialog.vue';
import createDraw from 'hyw-drag'
const tableRef = ref();
const selectionData = ref([]);
const store = useLoginStore();
const addWorksTypeDialogVisible = ref(false);
const EditWorksTypeDialogVisible = ref(false);
const EditWorksTypeDialogRow = ref({});
const DetailWorksTypeDialogVisible = ref(false);
const DetailWorksTypeDialogRow = ref({});
const tableExpandAll = ref(false)
const headers = {
Accept: "application/json",
...store.headers,
};
// 查询参数
const params = reactive({
works_type_name: "",
});
const handleCommand = ({ type, row }) => {
switch (type) {
case "detail":
handleDetail(row);
break;
case 'delete':
handleDelete([row]);
break;
}
};
// 删除数据
const handleDelete = data => {
ElMessageBox.confirm(`您确定要删除该作品类型吗？`).then(async () => {
const res = await deleteWorksType({
works_type_guid: data.map(v => v.works_type_guid).join()
});
if (res) {
getList();
}
});
};
// 修改
function handleUpdate(row) {
EditWorksTypeDialogVisible.value = true
EditWorksTypeDialogRow.value = row
}
// 详情
function handleDetail(row) {
DetailWorksTypeDialogVisible.value = true
DetailWorksTypeDialogRow.value = row
}
//排序
async function handleEditOrder(data) {
loading.value = true
await editWorksType(data);
getList();
}
// 导入方法
let loadingImoprt = null;
const uploadLoading = () => {
loadingImoprt = ElLoading.service({
lock: true,
text: "正在导入中...",
background: "rgba(255, 255, 255, 0.7)",
});
};
const closeUploadLoading = () => loadingImoprt.close();
const handleExcelSuccess = (value) => {
if (value.code == 0) {
ElMessageBox.alert(value.msg, "导入信息", {
dangerouslyUseHTMLString: true,
confirmButtonText: "确定",
});
} else {
ElMessage.error(value.msg);
}
closeUploadLoading();
getList()
};
const loading = ref(false)
const dataList = ref([])
//排序
let drag = ref(false)
// 查询数据
function getList() {
loading.value = true
getWorksTypeList(params).then((res) => {
if (res.code == 0) {
dataList.value = res.data
setTimeout(() => {
[...document.getElementsByClassName('el-table__row')].map(item => { item.classList.add('row1') });
[...document.getElementsByClassName('el-table__row--level-1')].map(item => { item.classList.remove('row1') })
drag.value === false && (drag.value = createDraw(document.getElementsByClassName('el-table__row')[0].parentElement))
})
loading.value = false
}
})
}
watch(drag, () => {
drag.value.start(() => {
dataList.value.map(item => {
tableRef.value.toggleRowExpansion(item, false)
})
tableExpandAll.value = false
})
drag.value.drop((info) => {
let targetIdx = [...document.getElementsByClassName('row1')].indexOf(info.el)
let sourceIdx = [...document.getElementsByClassName('row1')].indexOf(info.info.source.el)
let orderIdx = dataList.value[sourceIdx]['works_type_order']
dataList.value[targetIdx]['works_type_order'] = orderIdx
handleEditOrder(dataList.value[targetIdx])
})
})
getList()
</script>

78
src/service/works_type.js Normal file
View File

@ -0,0 +1,78 @@
import {
api,
downloadFile,
createApiUrl
} from '~/utils/axios';
/**
* 导出作品类型
* @param {Object} data
* @return {Promise} api
*/
export function exportExcel(data) {
downloadFile(createApiUrl('Works.WorksType/exportExcel'), data);
}
/**
* 下载作品类型模板
* @param {Object} data
* @return {Promise} api
*/
export function downloadTemplate(data) {
downloadFile(createApiUrl('Works.WorksType/downloadTemplate'), data);
}
/**
* 导入作品类型
* @param {Object} data
* @return {Promise} api
*/
export const importExcel = createApiUrl('Works.WorksType/importExcel');
/**
* 获取作品类型列表
* @param {Object} data
* @return {Promise} api
*/
export function getWorksTypeList(data) {
return api.post('Works.WorksType/getWorksTypeList', data);
}
/**
* 删除作品类型
* @param {Object} data
* @return {Promise} api
*/
export function deleteWorksType(data) {
return api.post('Works.WorksType/deleteWorksType', data, {
isTransformResponse: true,
isShowSuccessMessage: true,
errorMessageText: '删除失败'
});
}
/**
* 添加作品类型
* @param {Object} data
* @return {Promise} api
*/
export function addWorksType(data) {
return api.post('Works.WorksType/addWorksType', data, {
isTransformResponse: true,
isShowSuccessMessage: true,
errorMessageText: '添加失败'
});
}
/**
* 编辑作品类型
* @param {Object} data
* @return {Promise} api
*/
export function editWorksType(data) {
return api.post('Works.WorksType/editWorksType', data, {
isTransformResponse: true,
isShowSuccessMessage: true,
errorMessageText: '编辑失败'
});
}