451 lines
14 KiB
Vue
451 lines
14 KiB
Vue
<template>
|
||
<!-- 寻源需求 -->
|
||
<el-form
|
||
:model="queryParams"
|
||
ref="queryFormRef"
|
||
:inline="true"
|
||
size="default"
|
||
label-width="0"
|
||
>
|
||
<!-- 表单搜索 -->
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item prop="contractName">
|
||
<el-input
|
||
v-model.trim="queryParams.contractName"
|
||
style="width: 100%"
|
||
clearable
|
||
placeholder="请输入合同名称"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="contractCode">
|
||
<el-input
|
||
v-model.trim="queryParams.contractCode"
|
||
style="width: 100%"
|
||
clearable
|
||
placeholder="请输入合同编号"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="createTime">
|
||
<el-date-picker
|
||
v-model="createTime"
|
||
type="daterange"
|
||
style="width: 100%"
|
||
range-separator="-"
|
||
value-format="YYYY-MM-DD"
|
||
start-placeholder="更新开始日期"
|
||
end-placeholder="更新结束日期"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item>
|
||
<el-button class="primary-lease" type="primary" @click="getContractListData"
|
||
>查询</el-button
|
||
>
|
||
<el-button
|
||
class="primary-lease"
|
||
type="primary"
|
||
@click="onReset"
|
||
>重置</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="18">
|
||
<el-form-item>
|
||
<el-button class="primary-lease" type="primary" @click="addContract"
|
||
>合同新建</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="qualityLis"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column align="center" label="合同编码">
|
||
<template #default="{ row }">
|
||
<a
|
||
style="color:blue; "
|
||
>
|
||
{{ row.contractCode }}
|
||
</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="contractName" label="合同名称" />
|
||
<el-table-column align="center" prop="status" label="状态" >
|
||
<template #default="{ row }">
|
||
<el-switch
|
||
v-model="row.status"
|
||
active-value="0"
|
||
inactive-value="1"
|
||
@change="handleStatusChange(row)"
|
||
></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="qcTime" label="合同附件">
|
||
<template #default="{ row }">
|
||
<a
|
||
:href="row.bmFileInfoList[0].fileUrl"
|
||
target="_blank"
|
||
style="color: #00a288; text-decoration: underline"
|
||
>查看</a
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="createTime" label="创建时间" />
|
||
<el-table-column align="center" prop="updateTime" label="更新时间" />
|
||
<el-table-column align="center" label="操作" :width="220">
|
||
<template #default="{ row }">
|
||
<el-button
|
||
text
|
||
size="small"
|
||
type="primary"
|
||
|
||
@click="onContract(row, false)"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
<el-button
|
||
text
|
||
size="small"
|
||
type="primary"
|
||
@click="onDelete(row.id, true)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- <PagingComponent
|
||
@getList="getLeaseListData"
|
||
:pageSize="searchParams.pageSize"
|
||
:pageNumber="searchParams.pageNum"
|
||
:total="total"
|
||
/> -->
|
||
|
||
<!-- 新增和修改弹框 -->
|
||
<el-dialog
|
||
v-model="dialogVisibleSettlein"
|
||
:title="settleinTitle"
|
||
width="40%"
|
||
destroy-on-close
|
||
class="centered-dialog"
|
||
:close-on-click-modal="false"
|
||
@close="onDialogClose"
|
||
>
|
||
<el-form
|
||
label-width="140px"
|
||
ref="addAndEditFormRef"
|
||
label-position="right"
|
||
:model="addAndEditForm"
|
||
:rules="addAndEditFormRules"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="合同模板名称：" prop="contractName">
|
||
<el-input
|
||
autocomplete="off"
|
||
style="width: 850px"
|
||
maxlength="30"
|
||
v-model="addAndEditForm.contractName"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
|
||
支持格式：word.单个文件大小不能超过2M，最多可上传1张
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" >
|
||
<el-col :span="24">
|
||
<el-form-item label="附件" prop="fileInfoList">
|
||
<div style="flex: 1">
|
||
<UploadComponentNew
|
||
:maxSize="10"
|
||
:max-limit="1"
|
||
width="100%"
|
||
height="100%"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:minLimit="addAndEditForm.fileInfoList.length"
|
||
:actionUrl="uploadUrl"
|
||
listType="text"
|
||
:justifyContent="`flex-start`"
|
||
@onFileChange="onFileChange"
|
||
:acceptTypeList="['.doc','.docx' ]"
|
||
>
|
||
<template v-slot:default>
|
||
<!-- <el-icon size="48" color="#aaa"><Plus /></el-icon> -->
|
||
<el-button
|
||
:icon="UploadFilled"
|
||
type="primary"
|
||
class="primary-lease"
|
||
>上传文件</el-button
|
||
>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" class="primary-lease" @click="onCancel"
|
||
>取消</el-button
|
||
>
|
||
<el-button class="primary-lease" type="primary" @click="onSubmit()">
|
||
提交
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import TableComponent from 'components/TableComponent/index.vue'
|
||
import FormComponent from 'components/FormComponent/index.vue'
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
|
||
import TitleTip from 'components/TitleTip/index.vue'
|
||
import uploadComponent from 'components/uploadComponent/index.vue'
|
||
import previewImg from './previewImg/index.vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import type { FormInstance } from 'element-plus'
|
||
import { ref } from 'vue'
|
||
import { useStore } from 'store/user'
|
||
const store = useStore()
|
||
import { mainStore } from 'store/main'
|
||
const store2 = mainStore()
|
||
const isViewForm = ref(false)
|
||
|
||
const isDisabled = ref(false)
|
||
|
||
const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
|
||
|
||
const qualityLis = ref<any>([])
|
||
const queryFormRef = ref<any>(null)
|
||
|
||
import {
|
||
getContractListApi, //列表
|
||
addContractApi, //新增
|
||
editContractApi, //修改
|
||
delContractApi, //删除
|
||
} from 'http/api/contract-manage'
|
||
import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
|
||
const total = ref(0)
|
||
const createTime = ref([])
|
||
/* 查询参数 */
|
||
const queryParams: any = reactive({
|
||
contractName: '',
|
||
contractCode: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
})
|
||
|
||
const addAndEditForm = ref<any>({
|
||
id: '',
|
||
contractName: '',
|
||
fileInfoList: [],
|
||
fileInfoTempList: [],
|
||
bmFileInfoList: [],
|
||
})
|
||
|
||
// 获取列表
|
||
const getContractListData = async () => {
|
||
if (createTime.value.length > 0) {
|
||
console.log('33333', createTime.value)
|
||
queryParams.startTime = createTime.value[0]
|
||
queryParams.endTime = createTime.value[1]
|
||
}
|
||
const { data: res }: any = await getContractListApi(queryParams)
|
||
qualityLis.value = res
|
||
total.value = res.total
|
||
}
|
||
|
||
// 重置
|
||
const onReset = () => {
|
||
createTime.value = []
|
||
queryParams.startTime = ''
|
||
queryParams.endTime = ''
|
||
queryParams.pageNum = 1
|
||
queryParams.pageSize = 10
|
||
queryFormRef.value.resetFields()
|
||
getContractListData()
|
||
}
|
||
|
||
//状态选择
|
||
const handleStatusChange = (row:any)=>{
|
||
|
||
}
|
||
|
||
const addAndEditFormRef = ref()
|
||
const settleinTitle = ref('')
|
||
// 合同新增弹框显示隐藏
|
||
const dialogVisibleSettlein: any = ref(false)
|
||
// 合同新增
|
||
const addContract = () => {
|
||
settleinTitle.value = '合同新建'
|
||
dialogVisibleSettlein.value = true;
|
||
}
|
||
|
||
// 合同编辑
|
||
const onContract = (row: any) => {
|
||
addAndEditForm.value.id = row.id
|
||
addAndEditForm.value.contractName = row.contractName
|
||
console.log('2222',addAndEditForm.value.contractName)
|
||
settleinTitle.value = '合同修改'
|
||
dialogVisibleSettlein.value = true
|
||
}
|
||
|
||
const onDialogClose = () => {
|
||
addAndEditFormRef.value.resetFields()
|
||
addAndEditForm.value.fileInfoTempList = []
|
||
addAndEditForm.value.fileInfoList = []
|
||
addAndEditForm.value.bmFileInfoList = []
|
||
addAndEditForm.value.id = ''
|
||
addAndEditForm.value.contractName = ''
|
||
}
|
||
|
||
// 自定义事件
|
||
const onFileChange = (fileList: any) => {
|
||
addAndEditForm.value.fileInfoTempList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
|
||
addAndEditForm.value.fileInfoTempList.push(...fileListTemp)
|
||
}
|
||
|
||
const addAndEditFormRules = reactive({
|
||
contractName: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
|
||
fileInfoList: [{ required: true, message: '请上传合同附件', trigger: 'blur' }],
|
||
})
|
||
|
||
// 提交
|
||
const onSubmit = () => {
|
||
addAndEditForm.value.fileInfoList = addAndEditForm.value.fileInfoTempList
|
||
addAndEditFormRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
const SEN_API = settleinTitle.value === '合同修改' ? editContractApi : addContractApi
|
||
addAndEditForm.value.bmFileInfoList = addAndEditForm.value.fileInfoList
|
||
const res: any = await SEN_API(addAndEditForm.value)
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '提交成功',
|
||
})
|
||
dialogVisibleSettlein.value = false
|
||
getContractListData()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 删除
|
||
const onDelete = async (id: any) => {
|
||
const res: any = await delContractApi({ id })
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '删除成功',
|
||
})
|
||
getContractListData()
|
||
}
|
||
}
|
||
|
||
|
||
// 取消按钮
|
||
const onCancel = () => {
|
||
dialogVisibleSettlein.value = false
|
||
}
|
||
|
||
onMounted(() => {
|
||
getContractListData()
|
||
// getEquipmentTypeApi().then((res: any) => {
|
||
// deviceTypeTree.value = res.data
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep.upload-tip .el-form-item__label {
|
||
color: transparent;
|
||
}
|
||
.el-pagination {
|
||
justify-content: flex-end;
|
||
padding: 5px 0;
|
||
}
|
||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||
background-color: #3cb4a6;
|
||
}
|
||
:deep.el-form--inline .el-form-item {
|
||
margin-right: 6px;
|
||
width: 95%;
|
||
}
|
||
|
||
.img-list {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img-items {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin-right: 8px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mask-img {
|
||
visibility: hidden;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #000;
|
||
opacity: 0.5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.delete-icon {
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
z-index: 9;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.img-items:hover .mask-img {
|
||
visibility: visible;
|
||
}
|
||
}
|
||
</style>
|