证书管理

src/api/modules/certificate/list.js

@@ -13,7 +13,7 @@ export default {
     async detail(id) {
         return HcApi({
             url: '/api/blade-manager/signPfxFile/getById',
-            method: 'get',
+            method: 'post',
             params: {
                 id,
             },

src/styles/app/element.scss

@@ -207,3 +207,13 @@
     color: #a9abb2;
     cursor: not-allowed;
 }
+
+.el-form--label-top .el-form-item .el-form-item__label {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    .hc-form-item-label {
+        flex: 1;
+    }
+}

src/views/certificate/modules/list/form.vue

@@ -1,19 +1,94 @@
 <template>
     <hc-new-card :title="rowItem.id ? '编辑证书' : '新增证书'">
-        22213
-
+        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
+            <el-row :gutter="20">
+                <el-col :span="16">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="证书类型：" prop="certificateType">
+                                <div class="form-item-div">
+                                    <el-radio-group v-model="formModel.certificateType">
+                                        <el-radio :value="1">个人证书</el-radio>
+                                        <el-radio :value="2">企业证书</el-radio>
+                                    </el-radio-group>
+                                </div>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="关联用户：" prop="certificateUserId">
+                                <el-select-v2 v-model="formModel.certificateUserId" :options="users" placeholder="选择关联用户" filterable block @change="usersChange" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="证书所有者：" prop="certificateUserName">
+                                <el-input v-model="formModel.certificateUserName" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="所持证书者身份证号码：" prop="certificateId">
+                                <el-input v-model="formModel.certificateId" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="证书编号：" prop="certificateNumber">
+                                <el-input v-model="formModel.certificateNumber" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="证书密码：" prop="certificatePassword">
+                                <el-input v-model="formModel.certificatePassword" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item prop="certificateFileUrl">
+                        <template #label>
+                            <div class="hc-form-item-label">
+                                <div class="title-content">
+                                    <span class="title">证书文件：</span>
+                                    <span content="text">(支持上传文件格式为pfx文件)</span>
+                                </div>
+                                <div class="right-content">
+                                    <el-link type="warning" @click="formModel.certificateFileUrl = ''">清除</el-link>
+                                </div>
+                            </div>
+                        </template>
+                        <hc-form-upload num="1" :src="formModel.certificateFileUrl" @upload="certificateFileUpload" @change="certificateFileChange" />
+                    </el-form-item>
+                    <el-form-item label="签名体文件：" prop="signatureFileUrl">
+                        <template #label>
+                            <div class="hc-form-item-label">
+                                <div class="title-content">
+                                    <span class="title">签名体文件：</span>
+                                    <span content="text">(支持上传文件格式为JPG/PNG)</span>
+                                </div>
+                                <div class="right-content">
+                                    <el-link type="warning" @click="formModel.signatureFileUrl = ''">清除</el-link>
+                                </div>
+                            </div>
+                        </template>
+                        <hc-form-upload type="preview" num="1" :src="formModel.signatureFileUrl" @upload="signatureFileUpload" @change="signatureFileChange" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
         <template #action>
             <div class="hc-flex-center">
                 <el-button hc-btn class="mr-4" @click="cancelClick">取消</el-button>
                 <el-button hc-btn type="primary">提交</el-button>
             </div>
         </template>
+
+        <!-- 上传文件 -->
+        <hc-upload-file ref="uploadRef" :echo-params="uploadParams" :options="uploadOptions" @success="uploadSuccess" />
     </hc-new-card>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
-import { getArrValue, isNullES } from 'js-fast-way'
+import { nextTick, onMounted, ref } from 'vue'
+import { getHeader } from 'hc-vue3-ui'
+import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import adminApi from '~api/certificate/admin'
 import mainApi from '~api/certificate/list'
 
@@ -37,8 +112,140 @@ onMounted(() => {
 //获取数据
 const getDataApi = () => {
     console.log('rowItem:', rowItem.value)
+    const { id } = rowItem.value
+    if (!isNullES(id)) {
+        getDetailData(id)
+    }
+    findUserByName()
+}
+
+//获取数据详情
+const getDetailData = async (id) => {
+    const { data } = await mainApi.detail(id)
+    formModel.value = getObjValue(data)
 }
 
+//获取当前系统下所有用户
+const users = ref([])
+const findUserByName = async () => {
+    const { data } = await mainApi.findUserByName()
+    const res = getArrValue(data)
+    let newArr = []
+    for (let i = 0; i < res.length; i++) {
+        newArr.push({
+            value: res[i].id,
+            label: res[i].name,
+            idNumber: res[i].idNumber,
+            plaintextPassword: res[i].plaintextPassword,
+        })
+    }
+    users.value = newArr
+}
+//获取用户数据
+const usersChange = (val) => {
+    const item = users.value.find((item) => item.value === val)
+    console.log('item:', item)
+    formModel.value.certificateUserName = item.label
+    formModel.value.certificateId = item.idNumber
+    formModel.value.certificatePassword = item.plaintextPassword
+}
+
+
+//菜单表单
+const formRef = ref(null)
+const formModel = ref({
+    certificateType: 1,
+})
+const formRules = {
+    certificateType: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择证书类型',
+    },
+    certificateUserId: {
+        required: true,
+        trigger: 'blur',
+        message: '请选择关联用户',
+    },
+    certificateUserName: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入证书所有者',
+    },
+    certificateId: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入所持证书者身份证号码',
+    },
+    certificatePassword: {
+        required: true,
+        trigger: 'blur',
+        message: '请输入证书密码',
+    },
+    certificateFileUrl: {
+        required: true,
+        trigger: 'blur',
+        message: '请上传证书文件',
+    },
+    signatureFileUrl: {
+        required: true,
+        trigger: 'blur',
+        message: '请上传签名体文件',
+    },
+}
+
+//上传文件
+const uploadRef = ref(null)
+const uploadParams = ref({})
+const uploadOptions = ref({
+    url: '/api/blade-resource/client/addFileInfo',
+    headers: getHeader(),
+    multiple: false,
+})
+
+//上传证书文件
+const certificateFileUpload = () => {
+    uploadParams.value = { type: '证书文件' }
+    uploadOptions.value.accept = '.pfx'
+    uploadOptions.value.accept_tip = '支持上传文件格式为pfx文件'
+    uploadOptions.value.size = 200
+    nextTick(() => {
+        uploadRef.value?.selectFile()
+    })
+}
+const certificateFileChange = (val) => {
+    formModel.value.certificateFileUrl = val
+}
+
+//上传签名体文件
+const signatureFileUpload = () => {
+    uploadParams.value = { type: '签名体文件' }
+    uploadOptions.value.accept = '.jpg,.png'
+    uploadOptions.value.accept_tip = '支持上传文件格式为JPG/PNG'
+    uploadOptions.value.size = 200
+    nextTick(() => {
+        uploadRef.value?.selectFile()
+    })
+}
+const signatureFileChange = (val) => {
+    formModel.value.signatureFileUrl = val
+}
+
+// 文件上传成功的回调
+const uploadSuccess = ({ echoParams, resData }) => {
+    const { link, originalName } = getObjValue(resData)
+    if (echoParams.type === '证书文件') {
+        formModel.value.certificateFileUrl = link
+        formModel.value.certificateFileName = originalName
+    } else if (echoParams.type === '签名体文件') {
+        formModel.value.signatureFileUrl = link
+        formModel.value.signatureFileName = originalName
+    }
+    //关闭弹窗
+    uploadRef.value?.setModalShow(false)
+}
+
+
 //取消关闭
 const cancelClick = () => {
     emit('close')

src/views/system/menu.vue

@@ -80,8 +80,8 @@
                         <el-form-item label="菜单类型：" prop="category">
                             <div class="form-item-div">
                                 <el-radio-group v-model="formModel.category">
-                                    <el-radio :label="1">菜单</el-radio>
-                                    <el-radio :label="2">按钮</el-radio>
+                                    <el-radio :value="1">菜单</el-radio>
+                                    <el-radio :value="2">按钮</el-radio>
                                 </el-radio-group>
                             </div>
                         </el-form-item>
@@ -90,8 +90,8 @@
                         <el-form-item label="按钮是否显示：" prop="isShowButton">
                             <div class="form-item-div">
                                 <el-radio-group v-model="formModel.isShowButton">
-                                    <el-radio :label="2">否</el-radio>
-                                    <el-radio :label="1">是</el-radio>
+                                    <el-radio :value="2">否</el-radio>
+                                    <el-radio :value="1">是</el-radio>
                                 </el-radio-group>
                             </div>
                         </el-form-item>
@@ -100,8 +100,8 @@
                         <el-form-item label="是否外层：" prop="isLayout">
                             <div class="form-item-div">
                                 <el-radio-group v-model="formModel.isLayout">
-                                    <el-radio :label="1">否</el-radio>
-                                    <el-radio :label="2">是</el-radio>
+                                    <el-radio :value="1">否</el-radio>
+                                    <el-radio :value="2">是</el-radio>
                                 </el-radio-group>
                             </div>
                         </el-form-item>
@@ -110,8 +110,8 @@
                         <el-form-item label="是否新窗口：" prop="isOpen">
                             <div class="form-item-div">
                                 <el-radio-group v-model="formModel.isOpen">
-                                    <el-radio :label="1">否</el-radio>
-                                    <el-radio :label="2">是</el-radio>
+                                    <el-radio :value="1">否</el-radio>
+                                    <el-radio :value="2">是</el-radio>
                                 </el-radio-group>
                             </div>
                         </el-form-item>