|
|
@@ -0,0 +1,145 @@
|
|
|
+<template>
|
|
|
+ <div class="inspect-team">
|
|
|
+ <a-button class="addBtn" type="primary" preIcon="ant-design:plus-outlined" @click="handlerAdd">新增区队</a-button>
|
|
|
+ <a-table :columns="columnsTeam" size="small" :data-source="tableDataTeam" :scroll="{ y: 200 }" class="tableW"
|
|
|
+ :pagination="paginationTeam">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
|
|
|
+ <a class="table-action-link" @click="handlerDel(record)">删除</a>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, text }">
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 区队新增弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleTeamAdd" width="450px" :footer="null" :title="titleTeamAdd" centered
|
|
|
+ destroyOnClose>
|
|
|
+ <a-form :model="formStateTeam" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }"
|
|
|
+ autocomplete="off">
|
|
|
+ <a-form-item label="区队名称：">
|
|
|
+ <a-input v-model:value="formStateTeam.teamName" placeholder="请输入" clearable />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ <div class="edit-btn">
|
|
|
+ <a-button type="primary" @click="confirmAddTeam">提交</a-button>
|
|
|
+ <a-button type="success" @click="cancelAddTeam">取消</a-button>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive, onMounted } from 'vue'
|
|
|
+import { teamList, teamAdd, teamEdit, deleteTeam } from '../gasInspect.api'
|
|
|
+import { columnsTeam, paginationTeam } from '../gasInspect.data'
|
|
|
+
|
|
|
+let isFlag = ref('')
|
|
|
+let tableDataTeam = ref<any[]>([])
|
|
|
+let visibleTeamAdd = ref(false)//控制区队新增弹窗显示与隐藏
|
|
|
+let titleTeamAdd = ref('')//区队标题
|
|
|
+//区队名称
|
|
|
+let formStateTeam = reactive({
|
|
|
+ teamName: '',
|
|
|
+ id: '',
|
|
|
+})
|
|
|
+//获取区队列表
|
|
|
+async function getTeamList() {
|
|
|
+ paginationTeam.current = 1
|
|
|
+ let res = await teamList({ pageNo: paginationTeam.current, pageSize: paginationTeam.pageSize })
|
|
|
+ console.log(res, '区队列表-------------')
|
|
|
+ tableDataTeam.value = res.records
|
|
|
+ paginationTeam.total = res.total
|
|
|
+}
|
|
|
+//区队新增
|
|
|
+let handlerAdd = () => {
|
|
|
+ isFlag.value = 'add'
|
|
|
+ visibleTeamAdd.value = true
|
|
|
+ titleTeamAdd.value = '区队新增'
|
|
|
+}
|
|
|
+//区队编辑
|
|
|
+let handlerEdit = (record) => {
|
|
|
+ isFlag.value = 'edit'
|
|
|
+ visibleTeamAdd.value = true
|
|
|
+ titleTeamAdd.value = '区队编辑'
|
|
|
+ formStateTeam.id = record.id
|
|
|
+ formStateTeam.teamName = record.name
|
|
|
+}
|
|
|
+//确定添加/编辑
|
|
|
+async function confirmAddTeam() {
|
|
|
+ if (isFlag.value == 'add') {
|
|
|
+ let res = await teamAdd({ name: formStateTeam.teamName })
|
|
|
+ console.log(res, '区队新增------')
|
|
|
+ if (res) {
|
|
|
+ visibleTeamAdd.value = false
|
|
|
+ formStateTeam.teamName = ''
|
|
|
+ titleTeamAdd.value = ''
|
|
|
+ getTeamList()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let res = await teamEdit({id:formStateTeam.id,name:formStateTeam.teamName})
|
|
|
+ console.log(res,'区队编辑-------')
|
|
|
+ if (res) {
|
|
|
+ visibleTeamAdd.value = false
|
|
|
+ formStateTeam.teamName = ''
|
|
|
+ formStateTeam.id=''
|
|
|
+ titleTeamAdd.value = ''
|
|
|
+ getTeamList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+//取消添加/编辑
|
|
|
+let cancelAddTeam = () => {
|
|
|
+ formStateTeam.teamName = ''
|
|
|
+ formStateTeam.id=''
|
|
|
+ visibleTeamAdd.value = false
|
|
|
+ titleTeamAdd.value=''
|
|
|
+}
|
|
|
+
|
|
|
+//删除区队
|
|
|
+async function handlerDel(record) {
|
|
|
+ let res=await deleteTeam({id:record.id})
|
|
|
+ if(res){
|
|
|
+ getTeamList()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getTeamList()
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.inspect-team {
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .addBtn {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.zxm-form {
|
|
|
+ padding: 10px !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .zxm-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.edit-btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .zxm-btn {
|
|
|
+ margin: 0px 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .zxm-input {
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+}
|
|
|
+</style>
|
