<script setup>
|
import { reactive, ref, unref, onMounted, toRef } from 'vue'
|
import { AddUserUnit, EditUserUnit, DeleteUserUnit,GetUserUnit} 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 unitData = ref([])
|
const userInfo = ref('')
|
|
// 用户单位新建
|
const UnitdialogVisible = ref(false)
|
const formUnit = ref({
|
unitName: '',
|
description: '',
|
createDate: formatTime(new Date()), // 创建时间
|
creater: JSON.parse(localStorage.getItem('user')).userName // 创建人
|
})
|
const Unittype = ref('新建')
|
const formUnitRef = ref(null)
|
|
const unitRules = reactive({
|
unitName: {
|
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 getUnit = () => {
|
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" },
|
]
|
|
GetUserUnit({ ...pageQuery.value, filter }).then((res) => {
|
unitData.value = res.rows
|
pageTotal.value = res.total
|
})
|
}
|
|
// 新建用户单位
|
const AddUnit = () => {
|
Unittype.value = "新建"
|
formUnit.value = {
|
unitName: '',
|
description: '',
|
createDate: formatTime(new Date()),
|
creater: JSON.parse(localStorage.getItem('user')).userName
|
}
|
UnitdialogVisible.value = true
|
}
|
|
// 保存单位
|
const saveUnit = async (formEl) => {
|
if (!formEl) return
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
if (Unittype.value == "修改") {
|
EditUserUnit(formUnit.value).then((res) => {
|
ElMessage({ message: "修改成功", type: "success" })
|
UnitdialogVisible.value = false
|
getUnit()
|
})
|
} else {
|
AddUserUnit(formUnit.value).then((res) => {
|
ElMessage({ message: "添加成功", type: "success" })
|
UnitdialogVisible.value = false
|
getUnit()
|
})
|
}
|
} else {
|
console.log("error submit!", fields)
|
}
|
})
|
}
|
|
// 编辑单位
|
const EditUnit = (val) => {
|
Unittype.value = "修改"
|
formUnit.value = Object.assign({}, val)
|
UnitdialogVisible.value = true
|
}
|
|
// 批量删除
|
const UnitSelectionChange = (val) => {
|
ids.value = val.map((item) => item.id)
|
}
|
|
const deleteAll = () => {
|
if (ids.value.length == 0) {
|
ElMessage({ message: '请选择要删除的数据', type: 'error' })
|
return
|
}
|
DeleteUserUnit(ids.value).then((res) => {
|
ElMessage({ message: "删除成功", type: "success" })
|
getUnit();
|
})
|
}
|
|
|
// ElMessageBox.confirm('确定要删除选中的单位吗？', '警告', {
|
// confirmButtonText: '确定',
|
// cancelButtonText: '取消',
|
// type: 'warning'
|
// }).then(() => {
|
// DeleteUserUnit(ids.value).then((res) => {
|
// ElMessage({ message: "删除成功", type: "success" })
|
// getUnit()
|
// }).catch((err) => {
|
// ElMessage({ message: "删除失败: " + err.message, type: "error" })
|
// })
|
// }).catch(() => {
|
// ElMessage({ type: 'info', message: '已取消删除' })
|
// })
|
// }
|
|
const resetForm = (formEl) => {
|
if (!formEl) return
|
formEl.resetFields()
|
formUnit.value = {
|
unitName: '',
|
description: '',
|
createDate: formatTime(new Date()),
|
creater: JSON.parse(localStorage.getItem('user')).userName
|
}
|
}
|
|
onMounted(() => {
|
getUnit()
|
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="AddUnit"
|
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="isMin ? '950' : '450'"
|
:data="unitData"
|
style="width: 100%"
|
:header-cell-style="
|
isMin
|
? {
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '1.5rem',
|
height: '3rem',
|
border: 'none',
|
}
|
: {
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: 'none',
|
}
|
"
|
:row-style="
|
isMin
|
? {
|
color: '#101010',
|
fontSize: '1.88rem',
|
height: '3rem',
|
}
|
: {
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
}
|
"
|
@selection-change="UnitSelectionChange"
|
>
|
<el-table-column type="selection" align="center" />
|
<el-table-column prop="unitName" 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',
|
fontSize: isMin ? '1.88rem' : '0.88rem',
|
cursor: 'pointer',
|
}"
|
@click="EditUnit(scope.row)"
|
>编辑</span>
|
<span
|
:style="{
|
color: 'blue',
|
fontSize: isMin ? '1.88rem' : '0.88rem',
|
cursor: 'pointer',
|
paddingLeft: '30px'
|
}"
|
@click="() => { ids.value = [scope.row.id]; deleteAll() }"
|
>删除</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</ContentWrap>
|
|
<!-- 用户单位新建/编辑对话框 -->
|
<el-dialog
|
v-model="UnitdialogVisible"
|
title=""
|
width="30%"
|
:show-close="false"
|
:align-center="true"
|
@close="resetForm(formUnitRef)"
|
>
|
<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="formUnit"
|
label-width="auto"
|
label-position="top"
|
ref="formUnitRef"
|
:rules="unitRules"
|
:hide-required-asterisk="true"
|
>
|
<el-form-item prop="unitName">
|
<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="formUnit.unitName"
|
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="formUnit.description"
|
placeholder="请输入"
|
/>
|
</el-form-item> -->
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer" style="text-align: center">
|
<el-button
|
size="small"
|
@click="UnitdialogVisible = false"
|
style="height: 2rem; font-size: 0.88rem"
|
>取消</el-button>
|
<el-button
|
size="small"
|
type="primary"
|
@click="saveUnit(formUnitRef)"
|
style="height: 2rem; font-size: 0.88rem"
|
>保存</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
