|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="content">
|
|
|
<div class="oper">
|
|
|
<el-button type="primary" size="default" :icon="Plus" @click="showAddDialog">添加</el-button>
|
|
|
<!-- <el-button type="danger" size="default" :icon="DeleteFilled">删除</el-button> -->
|
|
|
</div>
|
|
|
<el-table :data="areaData" class="data-table">
|
|
|
<el-table-column prop="AreaName" label="工区名称" width="300" />
|
|
|
<el-table-column prop="CreateDate" label="创建时间" width="300" />
|
|
|
<el-table-column prop="UpdateTime" label="更新时间" width="*" />
|
|
|
<!-- <el-table-column label="操作" width="*">
|
|
|
<template #default="scope">
|
|
|
<el-button type="primary" size="small" @click="handleEdit(scope.row)"
|
|
|
>编辑</el-button
|
|
|
>
|
|
|
<el-button type="danger" size="small" @click="handleDelete(scope.row)"
|
|
|
>删除</el-button
|
|
|
>
|
|
|
</template>
|
|
|
</el-table-column> -->
|
|
|
</el-table>
|
|
|
<el-dialog v-model="showAdd" title="添加工区" style="width: 300px; height: 180px; z-index: 9999" @close="handleClose">
|
|
|
<el-form class="area-form">
|
|
|
<el-form-item label="工区名称：">
|
|
|
<el-input v-model="areaName" placeholder="请输入名称"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-button type="primary" @click="handleAdd" class="btn-confirm">确定</el-button>
|
|
|
<div>
|
|
|
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
definePageMeta({
|
|
|
requiresAuth: true
|
|
|
});
|
|
|
import { ref, onMounted } from "vue";
|
|
|
import { getWorkArea, addWorkArea, setWorkArea } from "~/services/workAreaService";
|
|
|
import { Plus, DeleteFilled } from "@element-plus/icons-vue";
|
|
|
import { ElMessageBox } from "element-plus";
|
|
|
import { emitter } from "~/utils/eventBus";
|
|
|
// 消息提示（自动隐藏）
|
|
|
const { $toastMessage } = useNuxtApp();
|
|
|
|
|
|
const areaData = ref(null);
|
|
|
|
|
|
const areaName = ref('');
|
|
|
|
|
|
const showAdd = ref(false);
|
|
|
const showAddDialog = () => {
|
|
|
showAdd.value = true;
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|
|
|
await nextTick();
|
|
|
await getData();
|
|
|
});
|
|
|
|
|
|
const handleAdd = async () => {
|
|
|
if (!areaName.value) {
|
|
|
$toastMessage.warning("请输入'工区名称'！")
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const response = await addWorkArea(areaName.value);
|
|
|
if (response.Code === 1) {
|
|
|
emitter.emit('addWorkArea');
|
|
|
await getData();
|
|
|
handleClose();
|
|
|
} else {
|
|
|
$toastMessage.error(`添加失败，错误：${response.Msg}`);
|
|
|
return;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const getData = async () => {
|
|
|
const response = await getWorkArea();
|
|
|
console.log(response);
|
|
|
if (response.Count > 0) {
|
|
|
areaData.value = response.Data;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleEdit = async (data) => {
|
|
|
console.log("编辑");
|
|
|
};
|
|
|
|
|
|
const handleDelete = async (data) => {
|
|
|
ElMessageBox.confirm(`确认删除工区 ${data.AreaName} 吗？`, "删除确认", {
|
|
|
confirmButtonText: "确认删除",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
draggable: true,
|
|
|
})
|
|
|
.then(() => {
|
|
|
deleteWorkArea(data.AreaID);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
console.log("已取消删除！");
|
|
|
});
|
|
|
console.log("删除");
|
|
|
};
|
|
|
|
|
|
const handleClose = () => {
|
|
|
showAdd.value = false;
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.data-table {
|
|
|
width: 100%;
|
|
|
border: solid 1px #ccc;
|
|
|
margin: 5px;
|
|
|
}
|
|
|
|
|
|
.oper {
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
/* 按钮间距 */
|
|
|
align-items: center;
|
|
|
margin-left: 15px;
|
|
|
}
|
|
|
|
|
|
.area-form {
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
/* box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4); */
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.btn-confirm {
|
|
|
display: flex;
|
|
|
margin-left: auto;
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
</style>
|