jhprjv2/ruoyi-ui/src/views/project/materialSeal/index.vue

765 lines
23 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="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="单位名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入单位名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="封样名称" prop="materialName">
<el-input
v-model="queryParams.materialName"
placeholder="请输入封样名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="使用部位" prop="usePosition">
<el-input
v-model="queryParams.usePosition"
placeholder="请输入使用部位"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="封样时间">
<el-date-picker
v-model="daterangeSealDate"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item label="指定品牌" prop="contractBrand">
<el-input
v-model="queryParams.contractBrand"
placeholder="请输入指定品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="拟用品牌" prop="useBrand">
<el-input
v-model="queryParams.useBrand"
placeholder="请输入拟用品牌"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="封样结果" prop="materialResult">
<el-select
v-model="queryParams.materialResult"
placeholder="请选择封样结果"
clearable
>
<el-option
v-for="dict in dict.type.project_checking_result"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="审批状态" prop="approveStatus" v-if="false">
<el-select
v-model="queryParams.approveStatus"
placeholder="请选择审批状态"
clearable
>
<el-option
v-for="dict in dict.type.project_check_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="监理人" prop="witnessUser">
<el-input
v-model="queryParams.witnessUser"
placeholder="请输入监理人名称/电话"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['project:materialSeal:add']"
>新增</el-button
>
</el-col> -->
<!-- <el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['project:materialSeal:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['project:materialSeal:remove']"
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['project:materialSeal:export']"
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> -->
<el-tabs v-model="queryParams.activeName" @tab-click="getList">
<el-tab-pane :label="tabs.all" name="all"></el-tab-pane>
<el-tab-pane :label="tabs.jxz" name="jxz"></el-tab-pane>
<el-tab-pane :label="tabs.ywc" name="ywc"></el-tab-pane
></el-tabs>
<el-table
v-loading="loading"
:data="materialSealList"
@selection-change="handleSelectionChange" stripe
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="项目名称"
align="center"
prop="projectName"
width="200"
fixed="left"
show-overflow-tooltip
/>
<el-table-column
label="单位名称"
align="center"
prop="deptName"
width="180"
show-overflow-tooltip
/>
<el-table-column label="封样主图" align="center" prop="mainImage" width="220">
<template slot-scope="scope">
<el-image
ref="preview"
style="width: 200px; height: 100px"
:src="getImageUrl(scope.row.mainImage)"
@click="onPreview(scope.row.imageUrls)"
></el-image>
</template>
</el-table-column>
<el-table-column
label="封样名称"
align="center"
prop="materialName"
width="180"
show-overflow-tooltip
/>
<el-table-column
label="使用部位"
align="center"
prop="usePosition"
width="150"
show-overflow-tooltip
/>
<el-table-column
label="指定品牌"
align="center"
prop="contractBrand"
width="120"
show-overflow-tooltip
/>
<el-table-column
label="拟用品牌"
align="center"
prop="useBrand"
width="120"
show-overflow-tooltip
/>
<el-table-column label="封样时间" align="center" prop="sealDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.sealDate, "{y}-{m}-{d} {h}:{i}") }}</span>
</template>
</el-table-column>
<el-table-column label="审批状态" align="center" prop="approveStatus" width="120">
<template slot-scope="scope">
<dict-tag :options="dict.type.project_check_status" :value="scope.row.approveStatus" />
</template>
</el-table-column>
<el-table-column
label="监理人"
align="center"
prop="witnessUser"
width="120"
show-overflow-tooltip
>
<template slot-scope="scope">
<div>{{ scope.row.witnessUserName }}</div>
<div>{{ scope.row.witnessUser }}</div>
</template>
</el-table-column>
<!-- <el-table-column label="封样结果" align="center" prop="materialResult">
<template slot-scope="scope">
<dict-tag :options="dict.type.project_checking_result" :value="scope.row.materialResult" />
</template>
</el-table-column> -->
<el-table-column label="会签单" align="center" prop="signFiles" width="120">
<template slot-scope="scope">
<el-button
v-if="scope.row.signFiles != null"
size="mini"
type="text"
icon="el-icon-paperclip"
@click="handledownloadSignFiles(scope.row)"
v-hasPermi="['project:materialSeal:list']"
>下载会签单</el-button
>
<span v-if="scope.row.signFiles == null"> - </span>
</template>
</el-table-column>
<el-table-column label="变更单" align="center" prop="alterationFiles" width="120">
<template slot-scope="scope">
<el-button
v-if="scope.row.alterationFiles != null"
size="mini"
type="text"
icon="el-icon-paperclip"
@click="handledownloadAlterationFiles(scope.row)"
v-hasPermi="['project:materialSeal:list']"
>下载变更单</el-button
>
<span v-if="scope.row.signFiles == null"> - </span>
</template>
</el-table-column>
<el-table-column label="数据状态" align="center" prop="isDel">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_common_isdel" :value="scope.row.isDel" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
fixed="right"
>
<template slot-scope="scope">
<el-button
v-if="scope.row.approveStatus != null"
size="mini"
type="text"
icon="el-icon-tickets"
@click="handleAuditinfo(scope.row)"
>流程日志</el-button
>
<el-button
v-if="scope.row.approveStatus!='4'"
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['project:materialSeal:edit']"
>修改</el-button
>
<el-button
v-if="scope.row.approveStatus!='4'"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['project:materialSeal: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"
/>
<!-- 添加或修改材料封样对话框 -->
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
:disabled="true"
/>
</el-form-item>
<el-form-item label="单位名称" prop="deptName">
<el-input
v-model="form.deptName"
placeholder="请输入单位名称"
:disabled="true"
/>
</el-form-item>
<el-form-item label="封样图片" prop="imageUrls">
<image-upload v-model="form.imageUrls" :limit="9" />
</el-form-item>
<el-form-item label="封样名称" prop="materialName">
<el-input v-model="form.materialName" placeholder="请输入封样名称" />
</el-form-item>
<el-form-item label="使用部位" prop="usePosition">
<el-input v-model="form.usePosition" placeholder="请输入使用部位" />
</el-form-item>
<el-form-item label="指定品牌" prop="contractBrand">
<el-input
v-model="form.contractBrand"
placeholder="请输入指定品牌"
@change="onlyFile"
/>
</el-form-item>
<el-form-item label="拟用品牌" prop="useBrand">
<el-input
v-model="form.useBrand"
placeholder="请输入拟用品牌"
@change="onlyFile"
/>
</el-form-item>
<el-form-item label="封样时间" prop="sealDate">
<el-date-picker
clearable
v-model="form.sealDate"
type="datetime"
default-time="10:00:00"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择封样时间"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item label="监理人" prop="witnessUser">
<el-select
v-model="form.witnessUser"
placeholder="请选择监理人"
filterable
style="width: 100%"
@change="selectWitnessUser"
>
<el-option-group
v-for="group in deptUserData"
:key="group.unitId + ''"
:label="group.unitName + ' [' + group.unitTypeName + '] '"
>
<el-option
v-for="item in group.userinfoList"
:key="item.phonenumber"
:label="item.nickName + ' [' + item.jobTypeName + '] '"
:value="item.phonenumber"
>
</el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="会签单" prop="signFiles">
<file-upload
v-model="form.signFiles"
:limit="1"
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
@input="fileInputSign"
/>
</el-form-item>
<el-form-item label="变更单" prop="alterationFiles" v-show="isOnly">
<file-upload
v-model="form.alterationFiles"
:limit="1"
:fileType="['pdf', 'png', 'jpg', 'jpeg']"
@input="fileInputAlteration"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="previewList" />
<indexDrawer ref="indexDrawer"></indexDrawer>
</div>
</template>
<script>
import {
listMaterialSeal,
getMaterialSeal,
delMaterialSeal,
addMaterialSeal,
updateMaterialSeal,
findGroupCountByApprove,
} from "@/api/project/materialSeal";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import indexDrawer from "../projectAuditinfo/indexDrawer.vue";
export default {
name: "MaterialSeal",
components: {
indexDrawer,
ElImageViewer,
},
dicts: ["sys_common_isdel","project_check_status","project_checking_result"],
data() {
return {
showViewer: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 材料封样表格数据
materialSealList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 备注时间范围
daterangeSealDate: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: null,
projectName: null,
deptId: null,
deptName: null,
imageUrls: null,
materialName: null,
usePosition: null,
contractBrand: null,
useBrand: null,
sealDate: null,
isDel: null,
approveStatus:null,
materialResult:null,
witnessUser:null,
activeName: "jxz",
},
tabs: {
all: "全部数据0",
jxz: "进行中0",
ywc: "已完成0",
},
// 表单参数
form: {},
// 表单校验
rules: {
imageUrls: [{ required: true, message: "请上传封样现场图片", trigger: "blur" }],
materialName: [
{ required: true, message: "请输入封样名称", trigger: "blur" },
{ max: 100, message: "封样名称最多100字符", trigger: "blur" },
],
usePosition: [
{ required: true, message: "请输入使用部位", trigger: "blur" },
{ max: 100, message: "使用部位最多100字符", trigger: "blur" },
],
contractBrand: [
{ required: true, message: "请输入合同指定品牌", trigger: "blur" },
{ max: 100, message: "合同指定品牌最多100字符", trigger: "blur" },
],
useBrand: [
{ required: true, message: "请输入使用品牌", trigger: "blur" },
{ max: 100, message: "使用品牌最多100字符", trigger: "blur" },
],
sealDate: [{ required: true, message: "请选择封样时间", trigger: "blur" }],
witnessUser: [
{ required: true, message: "请选择监理单位监理人", trigger: "blur" },
],
signFiles: [{ required: true, message: "请上传会签单附件", trigger: "blur" }],
alterationFiles: [
{ required: false, message: "请上传变更单附件", trigger: "blur" },
],
},
previewList: [],
deptUserData: [],
isOnly: false,
};
},
created() {
this.getList();
},
methods: {
fileInputSign(files) {
let fileUrls = null;
if (files.length > 0) {
fileUrls = "";
files.forEach((item) => {
fileUrls += "," + item.url;
});
fileUrls = fileUrls.substring(1);
}
this.form.signFiles = fileUrls;
},
fileInputAlteration(files) {
let fileUrls = null;
if (files.length > 0) {
fileUrls = "";
files.forEach((item) => {
fileUrls += "," + item.url;
});
fileUrls = fileUrls.substring(1);
}
this.form.alterationFiles = fileUrls;
},
onlyFile() {
if (
this.form.contractBrand &&
this.form.useBrand &&
this.form.contractBrand.indexOf(this.form.useBrand) == -1
) {
this.isOnly = true;
this.rules.alterationFiles[0].required = true;
} else {
this.isOnly = false;
this.alterationFiles = null;
this.rules.alterationFiles[0].required = false;
}
},
getImageUrl(url) {
return process.env.VUE_APP_BASE_API + url + ".min.jpg";
},
onPreview(urls) {
this.previewList = [];
urls.split(",").forEach((item) => {
this.previewList.push(process.env.VUE_APP_BASE_API + item);
});
this.showViewer = true;
},
closeViewer() {
this.showViewer = false;
},
/** 查询材料封样列表 */
getList() {
this.loading = true;
this.queryParams.params = {};
if (null != this.daterangeSealDate && "" != this.daterangeSealDate) {
this.queryParams.params["beginSealDate"] = this.daterangeSealDate[0];
this.queryParams.params["endSealDate"] = this.daterangeSealDate[1];
}
this.queryCount();
listMaterialSeal(this.queryParams).then((response) => {
this.materialSealList = response.rows;
this.total = response.total;
this.loading = false;
});
},
queryCount() {
findGroupCountByApprove(this.queryParams).then((response) => {
if (response && response.data) {
this.tabs.jxz = "进行中(" + response.data.jxz + "";
this.tabs.ywc = "已完成(" + response.data.ywc + "";
this.tabs.all = "全部数据(" + (response.data.jxz + response.data.ywc) + "";
}
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
projectId: null,
projectName: null,
deptId: null,
deptName: null,
mainImage: null,
imageUrls: null,
materialName: null,
usePosition: null,
contractBrand: null,
useBrand: null,
sealDate: null,
signFiles: null,
alterationFiles: null,
isDel: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
remark: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.daterangeSealDate = [];
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加材料封样";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getMaterialSeal(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改材料封样";
});
//查询单位人员
this.$api.publics
.selectProjectUnitUser({
unitType: "4",
projectId: row.projectId,
})
.then((d) => {
this.deptUserData = d.data;
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
this.form.approveStatus="1";
if (this.form.id != null) {
updateMaterialSeal(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addMaterialSeal(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除材料封样编号为"' + ids + '"的数据项?')
.then(function () {
return delMaterialSeal(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"project/materialSeal/export",
{
...this.queryParams,
},
`materialSeal_${new Date().getTime()}.xlsx`
);
},
/** 选择见证人*/
selectWitnessUser(val) {
this.deptUserData.forEach((item) => {
item.userinfoList.forEach((u) => {
if (u.phonenumber == val) {
this.form.witnessUserName = u.nickName + " [" + u.jobTypeName + "] ";
}
});
});
},
/** 下载附件 */
handledownloadSignFiles(row) {
this.files = row.signFiles.split(",");
this.files.forEach((item) => {
this.$download.resource(item);
});
},
/** 下载附件 */
handledownloadAlterationFiles(row) {
this.files = row.alterationFiles.split(",");
this.files.forEach((item) => {
this.$download.resource(item);
});
},
/** 流程日志 */
handleAuditinfo(row) {
row.title="材料封样";
row.logType="4";
this.$refs.indexDrawer.show(row);
}
},
};
</script>