YZProjectCloud/yanzhu-ui-vue3/src/views/manage/proProjectInfoSubdepts/index.vue

374 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="单位类型" prop="subDeptType">
<el-select v-model="queryParams.subDeptType" placeholder="请选择参建单位类型" clearable>
<el-option
v-for="dict in sub_dept_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="单位名称" prop="subDeptName">
<el-input
v-model="queryParams.subDeptName"
placeholder="请输入参建单位名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['manage:proProjectInfoSubdepts:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['manage:proProjectInfoSubdepts:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['manage:proProjectInfoSubdepts:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['manage:proProjectInfoSubdepts:export']"
>导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-tabs
v-model="activeName"
type="card"
class="demo-tabs"
@tab-click="getList"
>
<el-tab-pane :label="'全部('+tabs.all+''" name="all"></el-tab-pane>
<el-tab-pane :label="'已入场('+tabs.in+''" name="in"></el-tab-pane>
<el-tab-pane :label="'已退场('+tabs.out+''" name="out"></el-tab-pane>
</el-tabs>
<el-table v-loading="loading" :data="proProjectInfoSubdeptsList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="公司名称" align="center" prop="comName" />
<el-table-column label="项目名称" align="center" prop="projectName" />
<el-table-column label="单位类型" align="center" prop="subDeptType">
<template #default="scope">
<dict-tag :options="sub_dept_type" :value="scope.row.subDeptType"/>
</template>
</el-table-column>
<el-table-column label="单位名称" align="center" prop="subDeptName" />
<el-table-column label="信用代码" align="center" prop="subDeptCode" />
<el-table-column label="委托人" align="center" prop="subDeptLeaderName" />
<el-table-column label="委托人电话" align="center" prop="subDeptLeaderPhone" />
<el-table-column label="入场二维码" align="center" prop="qrCode" width="80" >
<template #default="scope">
<image-preview v-if="scope.row.qrCode" :src="scope.row.qrCode" :width="50" :height="50" />
<span v-if="!scope.row.qrCode">-</span>
</template>
</el-table-column>
<el-table-column label="进场状态" align="center" prop="useStatus">
<template #default="scope">
<dict-tag :options="sys_use_status" :value="scope.row.useStatus"/>
</template>
</el-table-column>
<el-table-column label="添加用户" align="center" prop="createBy" />
<el-table-column label="添加时间" align="center" prop="subDeptLeaderPhone" />
<el-table-column label="审批状态" align="center" prop="approveStatus" >
<template #default="scope">
<dict-tag :options="sys_approve_status" :value="scope.row.approveStatus"/>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['manage:proProjectInfoSubdepts:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['manage:proProjectInfoSubdepts:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改分包单位对话框 -->
<el-dialog :title="title" v-model="open" width="680px" append-to-body>
<el-form ref="proProjectInfoSubdeptsRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="公司名称" v-if="form.comId">
{{form.comName}}
</el-form-item>
<el-form-item label="项目名称" v-if="form.projectId">
<el-tag effect="plain">{{ form.projectName }}</el-tag>
</el-form-item>
<el-form-item label="单位类型" prop="subDeptType">
<el-select v-model="form.subDeptType" placeholder="请选择单位类型">
<el-option
v-for="dict in sub_dept_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="单位名称" prop="subDeptName">
<el-input v-model="form.subDeptName" placeholder="请输入单位名称" />
</el-form-item>
<el-form-item label="信用代码" prop="subDeptCode">
<el-input v-model="form.subDeptCode" placeholder="请输入信用代码" />
</el-form-item>
<el-form-item label="负责人主键" prop="subDeptLeaderId">
<el-input v-model="form.subDeptLeaderId" placeholder="请输入负责人主键" />
</el-form-item>
<el-form-item label="负责人姓名" prop="subDeptLeaderName">
<el-input v-model="form.subDeptLeaderName" placeholder="请输入负责人姓名" />
</el-form-item>
<el-form-item label="负责人证件号码" prop="subDeptLeaderCode">
<el-input v-model="form.subDeptLeaderCode" placeholder="请输入负责人证件号码" />
</el-form-item>
<el-form-item label="负责人电话" prop="subDeptLeaderPhone">
<el-input v-model="form.subDeptLeaderPhone" placeholder="请输入负责人电话" />
</el-form-item>
<el-form-item label="进场状态" prop="useStatus">
<el-select v-model="form.useStatus" placeholder="请选择进场状态">
<el-option
v-for="dict in sys_use_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="二维码" prop="qrCode">
<el-input v-model="form.qrCode" placeholder="请输入二维码" />
</el-form-item>
<el-form-item label="删除标识" prop="isDel">
<el-select v-model="form.isDel" placeholder="请选择删除标识">
<el-option
v-for="dict in sys_is_del"
:key="dict.value"
:label="dict.label"
:value="parseInt(dict.value)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</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>
</div>
</template>
<script setup name="ProProjectInfoSubdepts">
import { listProProjectInfoSubdepts, getProProjectInfoSubdepts, delProProjectInfoSubdepts, addProProjectInfoSubdepts, updateProProjectInfoSubdepts } from "@/api/manage/proProjectInfoSubdepts";
const { proxy } = getCurrentInstance();
const { sys_use_status, sub_dept_type, sys_approve_status } = proxy.useDict('sys_use_status', 'sub_dept_type', 'sys_approve_status');
const proProjectInfoSubdeptsList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const tabs = ref({all:0,in:0,out:0});
const activeName = ref("all");
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
deptId: null,
projectId: null,
subDeptId: null,
subDeptType: null,
subDeptName: null,
subDeptCode: null,
subDeptLeaderId: null,
subDeptLeaderName: null,
subDeptLeaderCode: null,
subDeptLeaderPhone: null,
useStatus: null,
approveStatus: null,
qrCode: null,
isDel: null,
},
rules: {
}
});
const { queryParams, form, rules } = toRefs(data);
/** */
function getList() {
loading.value = true;
listProProjectInfoSubdepts(queryParams.value).then(response => {
proProjectInfoSubdeptsList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
id: null,
deptId: null,
projectId: null,
subDeptId: null,
subDeptType: null,
subDeptName: null,
subDeptCode: null,
subDeptLeaderId: null,
subDeptLeaderName: null,
subDeptLeaderCode: null,
subDeptLeaderPhone: null,
useStatus: null,
approveStatus: null,
qrCode: null,
isDel: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null
};
proxy.resetForm("proProjectInfoSubdeptsRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加参建单位";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const _id = row.id || ids.value
getProProjectInfoSubdepts(_id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改参建单位";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["proProjectInfoSubdeptsRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updateProProjectInfoSubdepts(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addProProjectInfoSubdepts(form.value).then(response => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除分包单位编号为"' + _ids + '"的数据项?').then(function() {
return delProProjectInfoSubdepts(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download('manage/proProjectInfoSubdepts/export', {
...queryParams.value
}, `proProjectInfoSubdepts_${new Date().getTime()}.xlsx`)
}
getList();
</script>