<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="90px">
|
<el-form-item label="协议编号" prop="agreementId">
|
<!-- 编号是后端的长整型，输入非数字会让 Spring 绑定失败直接 400，故 @input 就地过滤 -->
|
<el-input
|
v-model="queryParams.agreementId"
|
placeholder="请输入协议编号"
|
clearable
|
style="width: 200px"
|
@input="onlyNumber"
|
@keyup.enter="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="类型" prop="agreementType">
|
<el-select v-model="queryParams.agreementType" placeholder="全部类型" clearable style="width: 160px">
|
<el-option v-for="item in AGREEMENT_TYPES" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" prop="latestFlag">
|
<el-select v-model="queryParams.latestFlag" placeholder="全部状态" clearable style="width: 160px">
|
<el-option v-for="item in LATEST_FLAG" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="更新时间" style="width: 308px">
|
<el-date-picker
|
v-model="dateRange"
|
value-format="YYYY-MM-DD"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
/>
|
</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="handlePublish" v-hasPermi="['system:agreement:add']">新发布</el-button>
|
</el-col>
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
|
<el-table v-loading="loading" :data="agreementList">
|
<el-table-column label="协议编号" prop="agreementId" min-width="130" />
|
<el-table-column label="类型" prop="agreementType" min-width="120">
|
<template #default="scope">{{ selectDictLabel(AGREEMENT_TYPES, scope.row.agreementType) }}</template>
|
</el-table-column>
|
<el-table-column label="版本号" prop="version" min-width="120" />
|
<el-table-column label="状态" prop="latestFlag" min-width="110" align="center">
|
<template #default="scope">
|
<el-tag :type="latestTagType(scope.row.latestFlag)" size="small">
|
{{ selectDictLabel(LATEST_FLAG, scope.row.latestFlag) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<!-- 版本行发布后不可修改，对它而言「创建」就是「发布」，
|
故原型这两列取的是 create_time/create_by，不是库里的 update_*（表里根本没有这两列） -->
|
<el-table-column label="更新时间" prop="createTime" min-width="170" />
|
<el-table-column label="更新人" prop="createBy" min-width="120" />
|
<el-table-column label="操作" align="center" width="100" fixed="right">
|
<template #default="scope">
|
<el-button link type="primary" @click="handleView(scope.row)" v-hasPermi="['system:agreement:query']">查看</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="新发布" v-model="open" width="480px" append-to-body>
|
<el-form ref="publishRef" :model="publishForm" :rules="publishRules" label-width="90px">
|
<el-form-item label="协议类型" prop="agreementType">
|
<el-select v-model="publishForm.agreementType" placeholder="请选择协议类型" style="width: 100%">
|
<el-option v-for="item in AGREEMENT_TYPES" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<div class="publish-hint">下一步进入编辑页，填写版本号与协议内容后发布</div>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="open = false">取 消</el-button>
|
<el-button type="primary" @click="handleNext">下一步</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="SystemAgreement">
|
import { listAgreement } from '@/api/system/agreement'
|
import { AGREEMENT_TYPES, LATEST_FLAG, latestTagType } from '@/utils/agreement'
|
|
const { proxy } = getCurrentInstance()
|
const router = useRouter()
|
|
const agreementList = ref([])
|
const loading = ref(true)
|
const showSearch = ref(true)
|
const total = ref(0)
|
const dateRange = ref([])
|
|
const open = ref(false)
|
const publishRef = ref()
|
const publishForm = ref({ agreementType: '' })
|
const publishRules = {
|
agreementType: [{ required: true, message: '协议类型不能为空', trigger: 'change' }]
|
}
|
|
const data = reactive({
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
agreementId: null,
|
agreementType: null,
|
latestFlag: null
|
}
|
})
|
|
const { queryParams } = toRefs(data)
|
|
// 编号输入就地过滤（清空后是空串，Spring 对空串会绑成 null，等价于不筛）
|
function onlyNumber(value) {
|
queryParams.value.agreementId = String(value == null ? '' : value).replace(/\D/g, '')
|
}
|
|
function getList() {
|
loading.value = true
|
listAgreement(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
|
agreementList.value = response.rows
|
total.value = response.total
|
loading.value = false
|
})
|
}
|
|
function handleQuery() {
|
queryParams.value.pageNum = 1
|
getList()
|
}
|
|
function resetQuery() {
|
dateRange.value = []
|
proxy.resetForm('queryRef')
|
handleQuery()
|
}
|
|
function handlePublish() {
|
publishForm.value = { agreementType: '' }
|
open.value = true
|
// resetForm 内部对 $refs 为空做了判空，故首次打开（对话框内容还没渲染）也不会报错；
|
// 它同时清掉上一次打开残留的校验红字
|
proxy.resetForm('publishRef')
|
}
|
|
function handleNext() {
|
publishRef.value.validate(valid => {
|
if (!valid) {
|
return
|
}
|
open.value = false
|
// 类型通过 query 带到表单页：新发布时还没有版本行，类型只能靠参数传过去
|
router.push({ path: '/system/agreement-form/add', query: { type: publishForm.value.agreementType } })
|
})
|
}
|
|
function handleView(row) {
|
router.push('/system/agreement-form/edit/' + row.agreementId)
|
}
|
|
getList()
|
</script>
|
|
<style scoped>
|
.publish-hint {
|
padding-left: 90px;
|
font-size: 12px;
|
color: #909399;
|
}
|
</style>
|
