<template>
<div class="h-full w-full p-2 overflow-hidden layout-side softwareDetailCss"
style="background-color: #eef2fc">
<div style="width: calc(100% - 0px);height: 100%;">
<div class="layout-right-top" style="height: 40px;">
<a-button type="primary" @click="back">返回</a-button>
<a-button key="back" type="primary" @click="addLine">新增产品基线</a-button>
</div>
<div style="height: calc(100% - 40px);">
<a-table bordered :columns="clomuns" :data-source="tableList" :rowKey="(record) => record.id"
>
<template #action="{ record }">
<span>
<a-tooltip placement="topRight">
<template #title>编辑</template>
<FormOutlined
class="mr-1 cursor-pointer-def primary-color"
style="font-size: 17px"
/>
</a-tooltip>
<a-tooltip placement="topRight">
<template #title>删除</template>
<a-popconfirm
title="确定要删除吗？"
@confirm="comfirm(record)"
@cancel="cancel"
>
<DeleteOutlined
class="cursor-pointer-def primary-color"
style="font-size: 17px"
/>
</a-popconfirm>
</a-tooltip>
<a-tooltip placement="topRight">
<template #title>下载</template>
<VerticalAlignBottomOutlined
class="mr-5 cursor-pointer-def danger-color"
style="font-size: 17px;margin-left: 5px;"
/>
</a-tooltip>
</span>
</template>
</a-table>
</div>
</div>
<!--弹窗-->
<ak-dialog title="基线信息编辑" width="600px" animation="zoom" top="10vh" v-model="cusVisible" :closeModal="false"
class="dialogPadding">
<template #footer>
<div class="w-full layout-right-center">
<a-button key="back" @click="cusVisible = false">取消</a-button>
<a-button type="primary" @click="handleOk">提交</a-button>
</div>
</template>
<div style="width: 500px;">
<a-form
:model="userFormState"
ref="userFormRef"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item label="基线名称" name="lineName">
<a-input v-model:value="userFormState.lineName"/>
</a-form-item>
<a-form-item label="内容说明" name="content">
<a-input v-model:value="userFormState.content"/>
</a-form-item>
<a-form-item label="用户手册" name="file1">
<a-upload
v-model:file-list="fileList"
name="file"
:multiple="true"
:action="uploadFileUrl"
@change="handleChange"
:before-upload="beforeUpload"
>
<a-button>
<upload-outlined></upload-outlined>
Click to Upload
</a-button>
</a-upload>
</a-form-item>
<!--<a-form-item label="用户头像">-->
<!-- <a-upload-->
<!-- v-model:file-list="fileList"-->
<!-- name="file"-->
<!-- list-type="picture-card"-->
<!-- class="avatar-uploader"-->
<!-- :show-upload-list="false"-->
<!-- :action="uploadFileUrl"-->
<!-- :before-upload="beforeUpload"-->
<!-- @change="handleChange"-->
<!-- :disabled="state.onlyRead"-->
<!-- >-->
<!-- <nip-avatar v-if="userFormState.userImg" :url="userFormState.userImg" :size="94" :radius="false"-->
<!-- :border="false"/>-->
<!-- <div v-else>-->
<!-- <loading-outlined v-if="loading"></loading-outlined>-->
<!-- <plus-outlined v-else></plus-outlined>-->
<!-- <div class="ant-upload-text">上传</div>-->
<!-- </div>-->
<!-- </a-upload>-->
<!--</a-form-item>-->
</a-col>
</a-row>
</a-form>
</div>
</ak-dialog>
</div>
</template>
<script>
export default {
name: "softwareDetail"
}
</script>
<script setup>
import {ref} from "vue";
import {softwareDetailDel, softwareDetailGet} from "../../../../common/api/softwareDetail";
import {message} from "ant-design-vue";
import {
DownOutlined,
DeleteOutlined,
FormOutlined,
UploadOutlined,
VerticalAlignBottomOutlined
} from "@ant-design/icons-vue"
const clomuns = [
{
title: '基线名称',
dataIndex: 'lineName',
key: 'lineName',
// width: '10%',
ellipsis: true
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
ellipsis: true
},
{
title: '内容说明',
dataIndex: 'content',
key: 'content',
// width: '10%',
ellipsis: true
},
{
title: '用户手册',
dataIndex: 'userBooks',
key: 'userBooks',
// width: '10%',
ellipsis: true
},
{
title: '源码',
dataIndex: 'code',
key: 'code',
// width: '10%',
ellipsis: true
},
{
title: '安装文件',
dataIndex: 'exeFile',
key: 'exeFile',
// width: '10%',
ellipsis: true
},
{
title: '操作',
dataIndex: 'options',
key: 'options',
width: '10%',
ellipsis: true,
slots: {customRender: 'action'}
}
]
let tableList = ref([])
const comfirm = (record) => {
// softwareDetailDel(record).then(async (res) => {
// await softwareDetailGet({softwareId}).then(res => {
// tableList.value = res.data
// })
// message.success('已删除成功')
// })
}
//用户点击了确定取消按钮
const cancel = () => {
message.warning('已取消删除')
}
const back = () => {
history.go(-1)
}
/**
* 弹窗
* */
let cusVisible = ref(false)
let addLine = () => {
cusVisible.value = true
}
const userFormRef = ref()
const handleOk = () => {
userFormRef.value.validate().then(() => {
console.log('通过验证')
}).catch((error) => {
console.log("error", error);
})
};
const userFormState = ref({
lineName: '',
content: '',
userBooks: '',
code: '',
exeFile: ''
})
let uploadFileUrl = ref(window.uploadFileUrl)
const fileList = ref([]);
const handleChange = (info) => {
if (info.file.status === 'uploading') {
return;
}
if (info.file.status === 'done') {
console.log(info.file.response.data.url)
console.log(fileList)
}
if (info.file.status === 'error') {
message.error('上传错误');
}
};
const beforeUpload = (file) => {
// const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
// if (!isJpgOrPng) {
// message.error('上传文件格式错误，只支持jpg或者png图片!');
// }
const isLt2M = file.size / 1024 / 1024 < 4;
if (!isLt2M) {
message.error('上传文件超出4MB大小限制！');
}
// return isJpgOrPng && isLt2M;
};
let labelCol = ref({span: 5})
let wrapperCol = ref({span: 17})
// 规则汇总
const validatePhone = async (rule, value) => {
if (value === '') {
return Promise.reject('请输入电话号码');
} else {
const reg = /^1[3-9]\d{9}$/;
if (!reg.test(value)) {
return Promise.reject('手机号码错误，请检查后重新输入！');
}
return Promise.resolve();
}
}
const validateIdCard = async (rule, value) => {
if (value === '') {
return Promise.reject('请输入身份证号码');
} else {
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (!reg.test(value)) {
return Promise.reject('身份证号码错误，请检查后重新输入！');
}
return Promise.resolve();
}
}
const validateEmail = async (rule, value) => {
if (value === '') {
return Promise.reject('请输入内部电子邮箱');
} else {
const reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
if (!reg.test(value)) {
return Promise.reject('内部电子邮箱格式错误，请检查后重新输入！');
}
return Promise.resolve();
}
}
const validateFile = async (rule, value,callback) =>{
// console.log(rule)
// console.log(value)
console.log(fileList.value)
if(fileList.value.length === 0) {
return Promise.reject('请选择需要上传的文件')
}else {
return Promise.resolve();
}
}
const rules = {
file1:[{required: true, validator: validateFile, trigger: 'change'}],
lineName: [{required: true, trigger: 'change', message: "请输入产品基线名称",}],
content: [{required: true, trigger: 'change', message: "请输入内容说明"}],
userAccount: [{required: true, message: "请输入用户名", trigger: 'change'}, {min: 3, max: 30, message: "用户名长度在3~30字之间"}],
phone: [{required: true, validator: validatePhone, trigger: 'change'}],
idCard: [{required: true, validator: validateIdCard, trigger: 'change'}],
email: [{required: true, validator: validateEmail, trigger: 'change'}],
bday: [{required: true, message: "请输入出生日期", trigger: 'change', type: "object"}],
};
</script>
<style scoped lang="less">
</style>
自定义触发
544070096112e03473b3b892adfc0b9.png
9bf34b7b923e0cc4458ba9cfaf00810.png
网友评论