yudao-dev/src/views/group/groupSetting/index.vue

<!--
 * @Author: zwq
 * @Date: 2025-10-11 14:27:37
 * @LastEditors: zwq
 * @LastEditTime: 2025-10-29 14:44:41
 * @Description:
-->
<template>
	<div class="app-container">
		<div class="searchBarBox">
			<el-form
				:inline="true"
				ref="searchBarForm"
				:model="formInline"
				class="searchBar">
				<span class="blue-block" />
				<el-form-item label="班组编号" prop="code">
					<el-input
						v-model="formInline.code"
						clearable
						size="small"
						placeholder="请输入班组编号" />
				</el-form-item>
				<el-form-item label="部门" prop="deptId">
					<dept-select
						style="width: 200px"
						ref="deptSelect"
						@DeptId="setDeptId"></dept-select>
				</el-form-item>
				<el-form-item label="班组名称" prop="name">
					<el-input
						v-model="formInline.name"
						clearable
						size="small"
						placeholder="请输入班组名称" />
				</el-form-item>
				<el-form-item label="组长" prop="leaderName">
					<el-input
						v-model="formInline.leaderName"
						clearable
						size="small"
						placeholder="请输入组长" />
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						size="small"
						v-hasPermi="['base:group-team:query']"
						@click="buttonClick({ btnName: 'search' })">
						查询
					</el-button>
				</el-form-item>
				<el-form-item>
					<span
						class="separateStyle"
						v-hasPermi="['base:group-team:query']"></span>
				</el-form-item>
				<el-form-item>
					<el-button size="small" @click="buttonClick({ btnName: 'reset' })">
						重置
					</el-button>
				</el-form-item>
				<el-form-item>
					<span
						class="separateStyle"
						v-hasPermi="['base:group-team:create']"></span>
				</el-form-item>
				<el-form-item>
					<el-button
						type="success"
						size="small"
						:plain="true"
						v-hasPermi="['base:group-team:create']"
						@click="buttonClick({ btnName: 'add' })">
						新增
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<base-table
			v-loading="dataListLoading"
			:table-props="tableProps"
			:page="listQuery.pageNo"
			:limit="listQuery.pageSize"
			:table-data="tableData"
			@emitFun="getDataList">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				:width="80"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			:destroy-on-close="true"
			width="50%">
			<add-or-update
				ref="addOrUpdate"
				@refreshDataList="successSubmit"></add-or-update>
		</base-dialog>
	</div>
</template>

<script>
import AddOrUpdate from './add-or-updata';
import deptSelect from './../deptSelect.vue';
import basicPage from '@/mixins/basic-page';
import changeStatus from './changeStatus.vue';
import { parseTime } from '@/filter/code-filter';
import { getGroupPage } from '@/api/group/groupSetting';

const tableProps = [
	{
		prop: 'code',
		label: '班组编号',
		width: 210,
	},
	{
		prop: 'name',
		label: '班组名称',
	},
	{
		prop: 'deptName',
		label: '所属部门',
		width: 110,
	},
	{
		prop: 'leaderName',
		label: '组长',
	},
	{
		prop: 'leaderPhone',
		label: '组长电话',
		width: 110,
	},
	{
		prop: 'num',
		label: '人数',
		width: 70,
	},
	{
		prop: 'isProduction',
		label: '是否生产班组',
		filter: (val) => {
			return val ? '是' : '否';
		},
		width: 110,
	},
	{
		prop: 'remark',
		label: '备注',
		showOverflowtooltip: true,
	},
	{
		prop: 'createTime',
		label: '创建时间',
		filter: parseTime,
		width: 150,
	},
	{
		prop: 'enabled',
		label: '班组状态',
		subcomponent: changeStatus,
		width: 80,
	},
];

export default {
	mixins: [basicPage],
	data() {
		return {
			urlOptions: {
				getDataListURL: getGroupPage,
			},
			tableProps,
			tableBtn: [
				this.$auth.hasPermi('base:group-team:update')
					? {
							type: 'edit',
							btnName: '编辑',
					  }
					: undefined,
			].filter((v) => v),
			tableData: [],
			formInline: {
				code: '',
				name: '',
				deptId: '',
				leaderName: '',
			},
		};
	},
	components: {
		AddOrUpdate,
		deptSelect,
	},
	created() {},
	methods: {
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery = {
						pageNo: 1,
						pageSize: 10,
						total: 1,
						...this.formInline,
					};
					this.getDataList();
					break;
				case 'reset':
					this.formInline.name = null;
					this.formInline.code = null;
					this.formInline.deptId = null;
					this.$refs.deptSelect.clear();
					this.formInline.leaderName = null;
					this.listQuery = {
						pageSize: 10,
						pageNo: 1,
						total: 1,
					};
					this.getDataList();
					break;
				case 'add':
					this.addOrEditTitle = '新增';
					this.addOrUpdateVisible = true;
					this.addOrUpdateHandle();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		setDeptId(val) {
			this.formInline.deptId = val;
		},
	},
};
</script>

<style scope>
.searchBarBox {
	width: 100%;
	position: relative;
	margin-bottom: 8px;
}
.searchBarBox::after {
	content: '';
	display: block;
	clear: both;
}
.searchBar .blue-block {
	display: inline-block;
	float: left;
	width: 4px;
	height: 16px;
	background-color: #0b58ff;
	border-radius: 1px;
	margin-right: 8px;
	margin-top: 12px;
}
.searchBar .el-form-item {
	margin-bottom: 4px;
}
.searchBar .separateStyle {
	display: inline-block;
	width: 1px;
	height: 24px;
	background: #e8e8e8;
	vertical-align: middle;
}
.searchBar .vue-treeselect__control {
	height: 32px !important;
	line-height: 32px !important;
	margin: 4px 0;
}
</style>