FactorySystemWeb/src/views/System/user.vue

<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-form :model="searchObj" class="search-box">
						<lay-row class="search-items">
							<lay-form-item label="姓名" prop="FName">
								<lay-input v-model="searchObj.FName"></lay-input>
							</lay-form-item>
							<lay-form-item label="手机号" prop="FPhone">
								<lay-input v-model="searchObj.FPhone"></lay-input>
							</lay-form-item>
							<lay-form-item label="工厂" prop="FFactoryList">
								<lay-select v-model="searchObj.FFactoryList">
									<lay-select-option v-for="(tIdv, tIdx) in factoryList" :key="tIdx" :value="tIdv.FID"
										:label="tIdv.FName"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item label="状态" prop="FState">
								<lay-select v-model="searchObj.FState">
									<lay-select-option v-for="(tIdv, tIdx) in stateList" :key="tIdx" :value="tIdv.FValue"
										:label="tIdv.FName"></lay-select-option>
								</lay-select>
							</lay-form-item>
						</lay-row>
						<lay-form-item class="search-btn">
							<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
							<lay-button size="sm" @click="_clickReset">重置</lay-button>
						</lay-form-item>
					</lay-form>
					<lay-table :columns="dataColumn" id="id" :dataSource="dataList" v-model:selectedKeys="selectedKeys"
						:checkbox="checkbox" :default-toolbar="defaultToolbar" :page="dataList.length > 0 ? pageInfo : null"
						@change="changePage">
						<template v-slot:toolbar>
							<lay-button size="sm" @click="_getPageList(false, true)">刷新</lay-button>
							<lay-button size="sm" type="normal" @click="_changeUser()">新增</lay-button>
						</template>
						<template v-slot:FUser="{ data }">
							{{ data.FUser }}
						</template>
						<template v-slot:FName="{ data }">
							{{ data.FName }}
						</template>
						<template v-slot:FFactoryName="{ data }">
							{{ data.FFactoryName }}
						</template>
						<template v-slot:FPhone="{ data }">
							{{ data.FPhone }}
						</template>
						<template v-slot:FRoleName="{ data }">
							{{ data.FRoleName }}
						</template>
						<template v-slot:FStateName="{ data }">
							{{ data.FStateName }}
						</template>
						<template v-slot:FAddDate="{ data }">
							{{ data.FAddDate }}
						</template>
						<template v-slot:FLoginDate="{ data }">
							{{ data.FLoginDate }}
						</template>
						<template v-slot:operator="{ data }">
							<lay-button size="xs" type="primary" @click="_changeUser(data)"> 编辑 </lay-button>
							<lay-button size="xs" type="danger" @click="_deleteUser(data.FID)">删除</lay-button>
						</template>
					</lay-table>
				</lay-card>
			</lay-col>
		</lay-row>
		<lay-layer area="56%" v-model="showEditBox" :title="editBoxTitle">
			<EditUser :userInfoObj="userInfoObj" :stateList="stateList" :factoryList="factoryList"
				@cancelClick="cancelClick"></EditUser>
		</lay-layer>
	</lay-container>
</template>
<script>
import {
	ref,
	watch
} from "vue";
import {
	getBasicList,
	deleteDataById,
	getPageList
} from "/src/api/api/common";
import {
	getFactoryList
} from "/src/api/api/factory";
import {
	GetPowerList,
	getRoleList
} from "/src/api/api/user";

import EditUser from './components/EditUser2.vue';
import '@layui/layui-vue/es/checkbox/index.css';
export default {
	components: {
		EditUser
	},
	setup() {
		let dataColumn = [{
			title: "用户名",
			key: "FUser"
		},
		{
			title: "姓名",
			key: "FName"
		},
		{
			title: "权限",
			key: "FRoleName"
		},
		{
			title: "手机号",
			key: "FPhone"
		},
		{
			title: "状态",
			key: "FStateName",
			width: "90px"
		},
		{
			title: "创建时间",
			key: "FAddDate",
			width: "126px"
		},
		{
			title: "最后登录时间",
			key: "FLoginDate",
			width: "182px"
		},
		{
			title: "操作",
			key: "operator",
			width: "148px"
		}
		];
		dataColumn.forEach((item) => {
			item.customSlot = item.key;
			item.align = "center";
		});
		const selectedKeys = ref(["1"]);
		const checkbox = ref(false);
		const defaultToolbar = ref(true);
		const showEditBox = ref(false);
		const userInfoObj = ref({});
		const searchObj = ref({});
		const postData = ref({});
		const pageInfo = ref({
			total: 0,
			limit: 10,
			current: 1
		});
		const dataList = ref([]);
		const stateList = ref([]);
		const factoryList = ref([]);
		const editBoxTitle = ref("");
		const powerList = ref([]);
		const roleLists = ref([]);


		return {
			userInfoObj,
			editBoxTitle,
			showEditBox,
			selectedKeys,
			checkbox,
			defaultToolbar,
			dataColumn,
			dataList,
			stateList,
			factoryList,
			pageInfo,
			searchObj,
			postData,
			powerList,
			roleLists
		};
	},
	mounted() {
		this._getBasicList();
		this._getFactoryList();
		
		this._getPowerList();
		this._getRoleList();
	},
	created(){
		this._getPageList(true);
	},
	methods: {
		changePage(obj) {
			this.pageInfo.current = obj.current;
			this.pageInfo.limit = obj.limit;
			this._getPageList();
		},
		//获取状态集合
		async _getBasicList() {
			this.stateList = await getBasicList(41) || [];
		},
		//获取工厂集合
		async _getFactoryList() {
			this.factoryList = await getFactoryList() || [];
		},
		async _getPowerList() {
			this.powerList = await GetPowerList() || [];
		},
		//获取角色集合
		async _getRoleList() {
			this.roleLists = await getRoleList() || [];
		},
		//获取用户集合
		async _getPageList(isFirst, showOk) {
			//this.dataList = [];
			this.pageInfo.total = 0;
			if (isFirst) {
				this.pageInfo.current = 1;
				this.pageInfo.total = 0;
			}
			this.postData.FPageIndex = this.pageInfo.current;
			this.postData.FPageSize = this.pageInfo.limit;
			this.postData.FUserType = 1;
			let result = await getPageList(this.postData, "User");
			//result.Data.List = result.Data.List || [];

			this._getPowerList();
			result.Data.List.forEach((item) => {
				let state = this.stateList.find(s => s.FValue == item.FState);
				item.FStateName = state == null ? "" : state.FName;
				let str = "";
				var power = this.powerList.filter(function (p) {
					return p.FUserID == item.FID;
				});

				for (let i = 0; i < power.length; i++) {
					if (power[i].FRole != "" && power[i].FFactoryID != "") {
						let factory = this.factoryList.find(s => s.FID == power[i].FFactoryID);
						let role = this.roleLists.find(s => s.FID == power[i].FRole);
						str += factory.FName + "=>" + role.FName + "\r\n";
					}
				}

				item.FRoleName = str;


				item.FLoginDate = item.FLoginDate == null ? "" : this.dateFormat(item.FLoginDate);
				item.FAddDate = item.FAddDate == null ? "" : this.dateFormat(item.FAddDate).split(' ')[0];
			});
			this.pageInfo.total = result.Data.Total || 0;
			this.dataList = result.Data.List;
		},
		//日期处理
		dateFormat(dataStr) {
			return dataStr.replace('T', ' ').split('.')[0];
		},
		//删除用户弹窗
		_deleteUser(userId) {
			let $this = this;
			layer.confirm("你确定要删除此用户吗？", {
				btn: [{
					text: '确定',
					callback: function (id) {
						$this.__deleteStudent(id, userId);
					}
				},
				{
					text: '取消',
					callback: function (id) {
						layer.close(id);
					}
				}
				]
			});
		},
		//实际删除用户
		async __deleteStudent(layId, userId) {
			let result = await deleteDataById(userId, 'User');
			layer.close(layId);
			if (result && result > 0) {
				layer.msg("操作成功", {
					time: 1000,
					icon: 1
				})
			} else {
				layer.msg("操作失败", {
					time: 1000,
					icon: 2
				})
			}
			this._getPageList(true);
		},
		//操作用户信息
		_changeUser(userObj) {
			if (userObj) this.editBoxTitle = "修改用户";
			else this.editBoxTitle = "添加用户";
			this.showEditBox = true;
			this.userInfoObj = userObj || {};
		},
		cancelClick(isRefresh) {
			this.showEditBox = false;
			if (isRefresh) {
				this._getPageList(true);
				this._getPowerList();
			}
		},
		//检索-检索
		_clickSearch() {
			this.postData = {};
			for (let key in this.searchObj) {
				let val = this.searchObj[key];
				if (val != null && val != "") this.postData[key] = val;
			}
			this._getPageList(true);
		},
		//检索-重置
		_clickReset() {
			this.searchObj = {};
			this._clickSearch();
		}
	}
}
</script>