修改

src/views/smarttrace/issueCert/index.vue

@@ -0,0 +1,285 @@
+<template>
+    <div class="p-3">
+        <div class="bg-fff flex1 ov-hd d-flex flex-cln" v-show="showSearch">
+            <div class="pd-16 border-bottom">
+                <div class="f-s-20 c-333 f-w-7 mb-10">企业证书发放记录</div>
+                <div class="d-flex">
+                    <div class="flex1 ov-hd d-flex j-ed">
+                        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
+                            <el-form-item label="关键字" prop="keyword">
+                                <el-input v-model="queryParams.keyword" placeholder="搜企业名称、证书名称" clearable style="width: 260px" @keyup.enter="handleQuery" />
+                            </el-form-item>
+                            <el-form-item label="创建时间" prop="dateRange">
+                                <div class="d-flex" style="width: 240px">
+                                    <DateRange v-model="queryParams.dateRange" v-model:start-date="queryParams.startDate" v-model:end-date="queryParams.endDate"></DateRange>
+                                </div>
+                            </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-button type="primary" @click="openIssueDialog">发放新的证书</el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
+            </div>
+            <div class="d-flex flex1 ov-hd flex-cln pd-16">
+                <div class="flex1 ov-hd">
+                    <vxe-table :loading="loading" border :data="list" min-height="0" max-height="100%">
+                        <vxe-column title="序号" align="center" type="seq" width="60" />
+                        <!-- 企业名称 -->
+                        <vxe-column title="企业名称" field="cpyname" :formatter="colNoData" min-width="100" />
+                        <vxe-column title="证书名称" field="certName" :formatter="colNoData" min-width="100" />
+                        <vxe-column title="证书" min-width="70">
+                            <template #default="{ row }">
+                                <ImagePreview :src="row.certUrl" width="50px" height="50px"></ImagePreview>
+                            </template>
+                        </vxe-column>
+                        <vxe-column title="发放时间" field="createTime" :formatter="colNoData" />
+                        <vxe-column title="发放人" field="issuer" :formatter="colNoData" />
+                        <vxe-column title="备注" field="remark" :formatter="colNoData" />
+                        <!-- 操作 -->
+                        <vxe-column title="操作" width="250" align="center" fixed="right">
+                            <template #default="{ row }">
+                                <el-button type="primary" text @click="openEditDialog(row)">编辑</el-button>
+                                <el-button type="danger" text @click="deleteNews(row)">删除</el-button>
+                            </template>
+                        </vxe-column>
+                    </vxe-table>
+                </div>
+                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+            </div>
+        </div>
+        <!-- 发放证书弹框 -->
+        <el-dialog v-model="issueDialogVisible" title="发放新的证书" width="600px" append-to-body :close-on-click-modal="false">
+            <el-form ref="issueFormRef" :model="form" :rules="rules" label-width="100px">
+                <el-form-item label="发放企业" prop="cpyName">
+                    <el-input v-model="form.cpyName" placeholder="请选择发放企业" readonly>
+                        <template #append>
+                            <el-button @click="openCompanyDialog">选择企业</el-button>
+                        </template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="证书名称" prop="certName">
+                    <el-input v-model="form.certName" placeholder="请输入证书名称" clearable />
+                </el-form-item>
+                <el-form-item label="证书图片" prop="certUrl">
+                    <imageUpload v-model="form.certUrl" :limit="1" isString :isShowTip="false"></imageUpload>
+                </el-form-item>
+                <el-form-item label="发放人" prop="issuer">
+                    <el-input v-model="form.issuer" placeholder="请输入发放人" clearable />
+                </el-form-item>
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="closeIssueDialog">取 消</el-button>
+                    <el-button type="primary" @click="submitIssueForm">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <!-- 选择企业弹框 -->
+        <el-dialog v-model="companyDialogVisible" title="选择发放企业" width="800px" append-to-body :close-on-click-modal="false">
+            <el-form :model="companyQueryParams" ref="companyQueryFormRef" label-width="100px" :inline="true" class="mb-10">
+                <el-form-item label="企业名称" prop="cpyName">
+                    <el-input v-model="companyQueryParams.cpyName" placeholder="请输入企业名称" clearable @keyup.enter="handleCompanyQuery" />
+                </el-form-item>
+                <el-form-item label="社会信用代码" prop="creditCode">
+                    <el-input v-model="companyQueryParams.creditCode" placeholder="请输入社会信用代码" clearable @keyup.enter="handleCompanyQuery" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="Search" @click="handleCompanyQuery">搜索</el-button>
+                    <el-button icon="Refresh" @click="resetCompanyQuery">重置</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table :data="companyList" v-loading="companyLoading" border>
+                <el-table-column type="index" width="55" align="center" label="序号" />
+                <el-table-column label="企业名称" align="center" prop="cpyName" />
+                <el-table-column label="社会统一信用代码" align="center" prop="creditCode"></el-table-column>
+                <el-table-column label="操作" width="100" align="center">
+                    <template #default="scope">
+                        <el-button type="primary" text @click="handleCompanySelect(scope.row)">选择</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination v-show="companyTotal > 0" :total="companyTotal" v-model:page="companyQueryParams.pageNum" v-model:limit="companyQueryParams.pageSize" @pagination="getCompanyList" />
+        </el-dialog>
+    </div>
+</template>
+
+<script setup name="gap-downloads" lang="ts">
+import { httpRequests } from '@/utils/httpRequests';
+import { colNoData } from '@/utils/noData';
+import { DateRange } from '@/views/models/index';
+
+const router = useRouter();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const queryFormRef = ref<ElFormInstance>();
+const list = ref<any[]>([]);
+const initFormData = {
+    id: undefined,
+    cpyid: undefined,
+    cpyName: '',
+    certName: '',
+    certUrl: '',
+    issuer: '',
+    remark: ''
+};
+const data = reactive<any>({
+    form: { ...initFormData },
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+    },
+    rules: {
+        cpyName: [{ required: true, trigger: 'change', message: '请选择发放企业' }],
+        certUrl: [{ required: true, trigger: 'change', message: '请上传证书图片' }]
+    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+const issueDialogVisible = ref(false);
+const issueFormRef = ref<ElFormInstance>();
+
+const companyDialogVisible = ref(false);
+const companyQueryFormRef = ref<ElFormInstance>();
+const companyLoading = ref(false);
+const companyTotal = ref(0);
+const companyList = ref<any[]>([]);
+const companyQueryParams = ref<any>({
+    pageNum: 1,
+    pageSize: 10,
+    cpyName: undefined,
+    creditCode: undefined,
+    status: '1'
+});
+/** 查询会员信息列表 */
+const getList = async () => {
+    loading.value = true;
+    const res: any = await httpRequests.get('/dgtmedicine/issueCertificate/list', queryParams.value);
+    if (!res || res.code !== 200) return;
+    list.value = res.rows;
+    total.value = res.total;
+    loading.value = false;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    queryParams.value.pageNum = 1;
+    getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+};
+
+/** 打开发放证书弹框 */
+const openIssueDialog = () => {
+    form.value = { ...initFormData };
+    issueFormRef.value?.resetFields();
+    issueDialogVisible.value = true;
+};
+
+/** 关闭发放证书弹框 */
+const closeIssueDialog = () => {
+    issueDialogVisible.value = false;
+};
+
+/** 提交发放证书表单（新增/编辑通用） */
+const submitIssueForm = async () => {
+    const valid = await issueFormRef.value?.validate().catch(() => false);
+    if (!valid) return;
+    const url = form.value.id ? '/dgtmedicine/issueCertificate/update' : '/dgtmedicine/issueCertificate/add';
+    const res: any = await httpRequests.post(url, form.value);
+    if (!res || res.code !== 200) return;
+    ElMessage.success(form.value.id ? '修改成功' : '发放成功');
+    issueDialogVisible.value = false;
+    getList();
+};
+
+/** 查询企业列表 */
+const getCompanyList = async () => {
+    companyLoading.value = true;
+    const res: any = await httpRequests.get('/company/listByPage', companyQueryParams.value);
+    if (!res || res.code !== 200) {
+        companyLoading.value = false;
+        return;
+    }
+    companyList.value = res.rows;
+    companyTotal.value = res.total;
+    companyLoading.value = false;
+};
+
+/** 搜索企业 */
+const handleCompanyQuery = () => {
+    companyQueryParams.value.pageNum = 1;
+    getCompanyList();
+};
+
+/** 重置企业搜索 */
+const resetCompanyQuery = () => {
+    companyQueryFormRef.value?.resetFields();
+    companyQueryParams.value.pageNum = 1;
+    companyQueryParams.value.pageSize = 10;
+    companyQueryParams.value.status = '1';
+    getCompanyList();
+};
+
+/** 打开企业选择弹框 */
+const openCompanyDialog = () => {
+    companyDialogVisible.value = true;
+    handleCompanyQuery();
+};
+
+/** 选择企业 */
+const handleCompanySelect = (row: any) => {
+    form.value.cpyid = row.id;
+    form.value.cpyName = row.cpyName;
+    companyDialogVisible.value = false;
+    issueFormRef.value?.validateField('cpyName');
+};
+
+/** 编辑弹框 */
+const openEditDialog = (row: any) => {
+    // 回填表单，兼容列表字段命名
+    form.value = {
+        ...initFormData,
+        id: row.id,
+        cpyid: row.cpyid ?? row.cpyId ?? row.id,
+        cpyName: row.cpyName || row.cpyname || '',
+        certName: row.certName,
+        certUrl: row.certUrl,
+        issuer: row.issuer,
+        remark: row.remark
+    };
+    issueDialogVisible.value = true;
+};
+
+/** 删除新闻 */
+const deleteNews = async (row) => {
+    ElMessageBox.confirm(`确认要删除该条证书记录吗？`, '删除提示', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(async () => {
+        const res = await httpRequests.get(`/dgtmedicine/issueCertificate/delById/${row.id}`);
+        if (res) {
+            ElMessage.success('删除成功');
+            getList();
+        }
+    });
+};
+
+
+onMounted(() => {
+    getList();
+});
+</script>
+<style scoped></style>