Files
ipms-sjy/yudao-ui/yudao-ui-admin-vue3-OutsContract/src/views/cms/outscontract/index.vue
2024-08-12 13:22:33 +08:00

328 lines
9.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="68px"
>
<el-form-item label="项目id" prop="projectId">
<el-input
v-model="queryParams.projectId"
placeholder="请输入项目id"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="主合同id" prop="contractId">
<el-input
v-model="queryParams.contractId"
placeholder="请输入主合同id"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="类型" prop="countType">
<el-select
v-model="queryParams.countType"
placeholder="请选择类型"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.CONTRACT_BILLING_TYPE)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="专业" prop="major">
<el-select
v-model="queryParams.major"
placeholder="请选择专业"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.MAJOR)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="签订时间" prop="signingTime">
<el-date-picker
v-model="queryParams.signingTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
value-format="YYYY-MM-DD HH:mm:ss"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="外包单位" prop="outsCompany">
<el-input
v-model="queryParams.outsCompany"
placeholder="请输入外包单位"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="外包合同金额" prop="amount">
<el-input
v-model="queryParams.amount"
placeholder="请输入外包合同金额"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="外包合同编号" prop="code">
<el-input
v-model="queryParams.code"
placeholder="请输入外包合同编号"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="最终外包金额" prop="finalAmount">
<el-input
v-model="queryParams.finalAmount"
placeholder="请输入最终外包金额"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="最后编辑人" prop="finalEditor">
<el-input
v-model="queryParams.finalEditor"
placeholder="请输入最后编辑人"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['cms:outs-contract:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['cms:outs-contract:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="主键" align="center" prop="id" />
<el-table-column label="项目id" align="center" prop="projectId" />
<el-table-column label="主合同id" align="center" prop="contractId" />
<el-table-column label="类型" align="center" prop="countType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.CONTRACT_BILLING_TYPE" :value="scope.row.countType" />
</template>
</el-table-column>
<el-table-column label="专业" align="center" prop="major">
<template #default="scope">
<dict-tag :type="DICT_TYPE.MAJOR" :value="scope.row.major" />
</template>
</el-table-column>
<el-table-column
label="签订时间"
align="center"
prop="signingTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="合同文件url" align="center" prop="contractFileUrl" />
<el-table-column label="创建者" align="center" prop="creator" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="更新者" align="center" prop="updater" />
<el-table-column
label="更新时间"
align="center"
prop="updateTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="是否删除" align="center" prop="deleted" />
<el-table-column label="租户编号" align="center" prop="tenantId" />
<el-table-column label="外包单位" align="center" prop="outsCompany" />
<el-table-column label="外包合同金额" align="center" prop="amount" />
<el-table-column label="外包合同编号" align="center" prop="code" />
<el-table-column label="最终外包金额" align="center" prop="finalAmount" />
<el-table-column label="最后编辑人" align="center" prop="finalEditor" />
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['cms:outs-contract:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['cms:outs-contract:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<OutsContractForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { OutsContractApi, OutsContractVO } from '@/api/cms/outscontract'
import OutsContractForm from './OutsContractForm.vue'
/** 外包合同 列表 */
defineOptions({ name: 'OutsContract' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<OutsContractVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
projectId: undefined,
contractId: undefined,
countType: undefined,
major: undefined,
signingTime: [],
contractFileUrl: undefined,
createTime: [],
outsCompany: undefined,
amount: undefined,
code: undefined,
finalAmount: undefined,
finalEditor: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await OutsContractApi.getOutsContractPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
handleQuery()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await OutsContractApi.deleteOutsContract(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await OutsContractApi.exportOutsContract(queryParams)
download.excel(data, '外包合同.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>