<script setup>
|
import { reactive, ref, unref, onMounted, toRef } from 'vue'
|
import { GetUserTeam, AddUserTeam, EditUserTeam, DeleteUserTeam } from '@/api/role'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ContentWrap } from '@/components/ContentWrap'
|
import { formatTime } from '@/utils/index'
|
|
const obj = {
|
selectName: '',
|
selectTime: [], // 时间范围
|
selectType: '',
|
selectInput: ''
|
}
|
|
const departmentData = ref([])
|
const userInfo = ref('')
|
|
// 用户班组新建
|
const TreamdialogVisible = ref(false)
|
const formTeam = ref({
|
teamName: '',
|
description: '',
|
createDate: formatTime(new Date()), // 创建时间
|
creater: JSON.parse(localStorage.getItem('user')).userName // 创建人
|
})
|
const Treamtype = ref('新建')
|
const formTreamdRef = ref(null)
|
|
const teamRules = reactive({
|
teamName: {
|
required: true,
|
message: '请输入班组名称',
|
trigger: 'blur'
|
}
|
})
|
|
const pageQuery = ref({
|
page: 1,
|
rows: 100,
|
total: 0,
|
tableName: 'string',
|
sort: 'string',
|
order: 'string',
|
wheres: 'string',
|
export: true,
|
value: 'string'
|
})
|
|
const queryForm = ref({
|
selectTime: [],
|
selectType: '',
|
selectInput: ''
|
})
|
|
const pageTotal = ref(0)
|
const ids = ref([])
|
|
// 获取用户班组
|
const getGroup = () => {
|
const startTime = formatTime(queryForm.value.selectTime[0])
|
const endTime = formatTime(queryForm.value.selectTime[1])
|
const filter = [
|
{
|
name: queryForm.value.selectType,
|
value: queryForm.value.selectInput,
|
displayType: "like",
|
},
|
{ name: "createDate", value: startTime, displayType: "ThanOrEqual" },
|
{ name: "createDate", value: endTime, displayType: "LessOrEqual" },
|
]
|
|
GetUserTeam({ ...pageQuery.value, filter }).then((res) => {
|
departmentData.value = res.rows
|
pageTotal.value = res.total
|
})
|
}
|
|
// 新建用户班组
|
const AddGroup = () => {
|
Treamtype.value = "新建"
|
formTeam.value = {
|
teamName: '',
|
description: '',
|
createDate: formatTime(new Date()),
|
creater: JSON.parse(localStorage.getItem('user')).userName
|
}
|
TreamdialogVisible.value = true
|
}
|
|
// 保存班组
|
const saveTream = async (formEl) => {
|
if (!formEl) return
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
if (Treamtype.value == "修改") {
|
EditUserTeam(formTeam.value).then((res) => {
|
ElMessage({ message: "修改成功", type: "success" })
|
TreamdialogVisible.value = false
|
getGroup()
|
})
|
} else {
|
AddUserTeam(formTeam.value).then((res) => {
|
ElMessage({ message: "添加成功", type: "success" })
|
TreamdialogVisible.value = false
|
getGroup()
|
})
|
}
|
} else {
|
console.log("error submit!", fields)
|
}
|
})
|
}
|
|
// 编辑班组
|
const EditTream = (val) => {
|
Treamtype.value = "修改"
|
formTeam.value = Object.assign({}, val)
|
TreamdialogVisible.value = true
|
}
|
|
// 批量删除
|
const TreamSelectionChange = (val) => {
|
ids.value = val.map((item) => item.id)
|
}
|
|
const deleteAll = () => {
|
if (ids.value.length == 0) {
|
ElMessage({ message: '请选择要删除的数据', type: 'error' })
|
return
|
}
|
|
DeleteUserTeam(ids.value).then((res) => {
|
ElMessage({ message: "删除成功", type: "success" });
|
console.log('将要删除的ID:', ids.value)
|
getGroup();
|
})
|
}
|
|
const resetForm = (formEl) => {
|
if (!formEl) return
|
formEl.resetFields()
|
formTeam.value = {
|
teamName: '',
|
description: '',
|
createDate: formatTime(new Date()),
|
creater: JSON.parse(localStorage.getItem('user')).userName
|
}
|
}
|
|
onMounted(() => {
|
getGroup()
|
userInfo.value = JSON.parse(localStorage.getItem('user')).userInfo
|
})
|
</script>
|
|
<template>
|
<ContentWrap>
|
<div class="box" style="display: flex; align-items: center">
|
<div class="mb-10px">
|
<el-button
|
type="primary"
|
size="small"
|
@click="AddGroup"
|
style="width: 5.5rem; height: 2rem; font-size: 0.88rem; display: flex; align-items: center"
|
>新建</el-button>
|
</div>
|
<div class="mb-10px">
|
<div style="width: 5.5rem; height: 2rem; font-size: 0.88rem;display: flex; align-items: center ;margin-left: 40px;">
|
<el-button
|
type="danger"
|
size="small"
|
style="width: 5.5rem; height: 2rem; font-size: 0.88rem;"
|
class="text_btn"
|
@click="deleteAll"
|
>批量删除</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 用户班组表格 -->
|
<el-table
|
empty-text="暂无数据"
|
height="800"
|
:data="departmentData"
|
style="width: 100%"
|
:header-cell-style="{
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: 'none'
|
}"
|
:row-style="{
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem'
|
}"
|
@selection-change="TreamSelectionChange"
|
>
|
<el-table-column type="selection" align="center" />
|
<el-table-column prop="teamName" label="班组名称" align="center" />
|
<el-table-column prop="creater" label="创建者" align="center" />
|
<el-table-column prop="createDate" label="创建时间" align="center" />
|
<el-table-column label="操作" align="center">
|
<template #default="scope">
|
<span
|
v-if="
|
!(userInfo.userName == 'admin' || userInfo.roleId == '1'
|
? scope.row.userName == 'admin' || scope.row.user_Id == '1'
|
: scope.row.userName == 'admin' ||
|
scope.row.user_Id == '1' ||
|
scope.row.userName != userInfo.userName)
|
"
|
style="color: blue; font-size: 0.88rem; cursor: pointer"
|
@click="EditTream(scope.row)"
|
>编辑</span>
|
<span
|
style="color:blue; font-size: 0.88rem; padding-left: 30px; cursor: pointer"
|
@click="deleteAll"
|
>删除</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</ContentWrap>
|
|
<!-- 用户班组新建/编辑对话框 -->
|
<el-dialog
|
v-model="TreamdialogVisible"
|
title=""
|
width="30%"
|
:show-close="false"
|
:align-center="true"
|
@close="resetForm(formTreamdRef)"
|
>
|
<template #title>
|
<div style="height: 3.63rem; display: flex; border-bottom: 1px solid #e6e6e6">
|
<span style="color: rgb(16, 16, 16); font-size: 1rem; font-weight: bold">用户班组</span>
|
</div>
|
</template>
|
<el-form
|
:model="formTeam"
|
label-width="auto"
|
label-position="top"
|
ref="formTreamdRef"
|
:rules="teamRules"
|
:hide-required-asterisk="true"
|
>
|
<el-form-item prop="teamName">
|
<template #label>
|
<div style="display: flex; align-items: flex-end">
|
<span style="color: red; margin-right: 0.2rem">*</span>
|
<span style="font-size: 0.88rem; color: black; font-weight: bold">班组名称</span>
|
</div>
|
</template>
|
<el-input
|
style="height: 2rem"
|
size="small"
|
v-model="formTeam.teamName"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
<!-- <el-form-item>
|
<template #label>
|
<div style="display: flex; align-items: flex-end">
|
<span style="font-size: 0.88rem; color: black; font-weight: bold">备注</span>
|
</div>
|
</template>
|
<el-input
|
style="height: 2rem"
|
size="small"
|
v-model="formTeam.description"
|
placeholder="请输入"
|
/>
|
</el-form-item> -->
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer" style="text-align: center">
|
<el-button
|
size="small"
|
@click="TreamdialogVisible = false"
|
style="height: 2rem; font-size: 0.88rem"
|
>取消</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
@click="saveTream(formTreamdRef)"
|
style="height: 2rem; font-size: 0.88rem"
|
>保存</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
