CMVR-IOT-UI/src/views/is/project/index.vue

419 lines
11 KiB
Vue
Raw Normal View History

2025-11-24 14:37:40 +08:00
<template>
<div class="app-container">
<div ref="topContainerRef">
<TableSearch
:queryParams="queryParams"
:showSearch="showSearch"
label-width="100px"
queryRef="queryRef"
@refresh="resetQuery"
@search="handleQuery"
>
<template #one>
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24" :xxl="6">
<el-form-item label="测试人员" prop="tester">
<el-input
v-model="queryParams.tester"
placeholder="请输入测试人员"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
</template>
</TableSearch>
<el-row :gutter="10" class="mb8">
<el-col>
<el-button
type="primary"
plain
icon="Plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:project:add']"
>新增</el-button
>
</el-col>
</el-row>
</div>
<div :style="containerHeight">
<el-table
v-loading="loading"
height="100%"
:data="projectList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="项目ID" align="center" prop="projectId" width="150" show-overflow-tooltip />
<el-table-column label="项目名称" align="center" prop="projectName" width="150" show-overflow-tooltip />
<el-table-column label="测试人员" align="center" prop="tester" />
<el-table-column
label="计划测试开始时间"
align="center"
prop="planStart"
width="180"
>
<template #default="{ row }">
<span>{{ parseTime(row.planStart) }}</span>
</template>
</el-table-column>
<el-table-column label="计划测试结束时间" align="center" prop="planEnd" width="180">
<template #default="{ row }">
<span>{{ parseTime(row.planEnd) }}</span>
</template>
</el-table-column>
<el-table-column label="项目描述" width="200" show-overflow-tooltip align="center" prop="description" />
<el-table-column label="项目状态" align="center" prop="status">
<template #default="{ row }">
{{ row.status == 0 ? '已执行': '未执行' }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="320px" class-name="small-padding fixed-width" fixed="right">
<template #default="{ row }">
<el-button
size="mini"
type="text"
@click="handleSetting(row)"
v-hasPermi="['system:project:add','system:project:edit']"
>配置方案
</el-button>
<el-button
size="mini"
type="text"
@click="handleEvaluate(row)"
v-hasPermi="['system:project:add','system:project:edit']"
>评价
</el-button>
<el-button
size="mini"
type="text"
@click="handleExecute(row)"
v-hasPermi="['system:project:add','system:project:edit']"
>执行
</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(row)"
v-hasPermi="['system:project:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
@click="handleDelete(row)"
v-hasPermi="['system:project:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
<!-- 添加或修改语料库对话框 -->
<el-dialog
:title="title"
v-model="open"
width="740px"
:append-to-body="false"
body-class="testProject_dialog"
>
<el-form ref="projectRef" :model="form" :rules="rules" label-width="120px">
<div class="card">
<div class="form-title">项目信息</div>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入语料名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="测试人员" prop="tester">
<el-input v-model="form.tester" placeholder="请输入测试人员" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划开始时间" prop="planStart">
<el-date-picker
clearable
v-model="form.planStart"
type="datetime"
placeholder="请选择计划测试开始时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划结束时间" prop="planEnd">
<el-date-picker
clearable
v-model="form.planEnd"
type="datetime"
placeholder="请选择计划测试结束时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序" prop="sort">
<el-input-number
v-model="form.sort"
placeholder="排序"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="项目描述" prop="description">
<el-input
v-model="form.description"
type="textarea"
placeholder="请输入项目描述"
/>
</el-form-item>
</el-col>
</el-row>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
<Run
:drawer="executeOpen"
@close="executeOpen = false"
:currentRow="currentRow"
/>
<el-drawer
v-model="openDashboard"
:destroy-on-close="true"
:size="580"
:title="currentLog.projectName + '的流程'"
append-to-body
modal-class="rdashboad-log"
@close="handleClose"
>
<el-card
v-for="item in taskRightList"
shadow="hover"
style="width: 100%; margin-bottom: 10px"
>
<div
class="flex align-center"
style="cursor: pointer"
@click="handleLogicFlow(item)"
>
<div>{{ item.name }}</div>
<div class="flex align-center" style="margin-left: 10px">
<el-icon>
<View />
</el-icon>
</div>
</div>
</el-card>
</el-drawer>
</div>
</template>
<script setup>
import TableSearch from "@/components/TableSearch/index.vue";
import { useContainerHeight } from "@/hooks/tableHeight";
const topContainerRef = ref();
const containerHeight = useContainerHeight(topContainerRef);
const projectList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
projectName: null,
tester: null,
planStart: null,
planEnd: null,
description: null,
status: null,
},
rules: {
projectName: [{ required: true, message: "项目名称不能为空", trigger: "blur" }],
tester: [{ required: true, message: "请输入测试人员", trigger: "blur" }],
planStart: [{ required: true, message: "请输入计划测试开始时间", trigger: "blur" }],
planEnd: [{ required: true, message: "请输入计划测试结束时间", trigger: "blur" }]
},
});
const { queryParams, form, rules } = toRefs(data);
/** 查询语音交互-项目列表 */
function getList() {
projectList.value = [
{
projectId: '1',
projectName: 'test',
tester: 'test',
planStart: '2025-11-24 11:08:01',
planEnd: '2025-11-25 11:08:01',
description: 'ssssss'
}
]
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
projectId: null,
projectName: null,
tester: null,
planStart: null,
planEnd: null,
description: null,
status: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.projectId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加测试项目";
}
const router = useRouter()
const handleSetting = (row) => {
router.push('/is/plan/index/' + row.projectId)
}
const executeOpen = ref(false);
const currentRow = ref(undefined);
const handleExecute = (row) => {
currentRow.value = row;
executeOpen.value = true;
}
const currentLog = ref({});
const openDashboard = ref(false);
const taskRightList = ref([]);
// 取消按钮
function handleClose() {
openDashboard.value = false;
}
// 评价
const handleEvaluate = (row) => {
router.push('/is/evaluate/index/' + row.projectId)
}
onMounted(() => {
getList();
})
</script>
<style lang="scss" scoped>
:deep() {
.testProject_dialog {
.el-date-editor {
--el-date-editor-width: 100%;
}
.el-input-number {
width: 100%;
}
.card {
padding: 12px;
border: 1px solid #e4e7ed;
border-radius: 8px;
margin-bottom: 20px;
&:hover {
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.form-title {
display: flex;
align-items: center;
font-size: 16px;
margin-bottom: 10px;
&::before {
content: "";
width: 4px;
height: 16px;
background: blue;
display: inline-block;
margin-right: 8px;
}
}
}
}
.el-scrollbar__view {
width: 100%;
}
}
</style>