双击打开详情修复

This commit is contained in:
2024-12-26 17:53:50 +08:00
parent 05a117152c
commit 2bd0de8c17
36 changed files with 815 additions and 750 deletions

View File

@@ -431,6 +431,13 @@ const crudColumns = ref([
}
])
// 暴露给route-view的刷新表格函数
const refreshCrudTable = () => {
crudRef.value.refresh()
}
defineExpose({ refreshCrudTable })
defineOptions({
name: "case"
})

View File

@@ -238,6 +238,11 @@ const handleAddFileInputDemand = () => {
fileInputRef.value.open()
}
const refreshCrudTable = () => {
crudRef.value.refresh()
}
defineExpose({ refreshCrudTable })
defineOptions({
name: "dut"
})

View File

@@ -0,0 +1,95 @@
import { defineComponent, inject, ref } from "vue"
import { TreeNodeData } from "@arco-design/web-vue"
import { useRoute } from "vue-router"
import { Message } from "@arco-design/web-vue"
import { useTreeDataStore } from "@/store"
import dutAPI from "@/api/project/dut"
import useOptions from "./useOptions"
import MaForm from "@/components/ma-form/index.vue"
const DutSubForm = defineComponent({
name: "DutSubForm",
setup(props, { expose }) {
// globals
const route = useRoute()
const project_id = route.query.id
const treeDataStore = useTreeDataStore()
const rightViewRef = inject("rightViewRef")
// refs
const visible = ref(false)
const formRef = ref<InstanceType<typeof MaForm> | null>(null)
const formData = ref<any>({})
// hooks
const { options, columnOptions } = useOptions(formRef)
// 标题
const title = ref("被测件详情")
// 双击打开回调
const open = async (nodeData: TreeNodeData) => {
// 请求数据
try {
const key = nodeData.key
// 设置表单名称
title.value = nodeData.title!
const res = await dutAPI.getDutOne({ project_id, key })
// 更新表单
formData.value = res.data
formData.value.round = key
visible.value = true
} catch (e) {
visible.value = false
}
}
// 异步确认按钮点击
const handleBeforeOk = async () => {
const isValidated = await formRef.value!.validateForm()
if (isValidated) {
// 失败
return false
} else {
// 成功
const res = await dutAPI.update(formData.value.id, { project_id, ...formData.value })
treeDataStore.updateDutTreeData(res.data, project_id) // 刷新树节点信息
!(rightViewRef as any).value.refresh()
Message.success("修改成功")
}
}
// out use
expose({ open })
// Dom
return () => (
<a-modal
v-model:visible={visible.value}
width={"40%"}
draggable
unmount-on-close
ok-text="保存"
cancel-text="关闭"
on-before-ok={handleBeforeOk}
>
{{
title: () => <span>[]-{title.value}</span>,
default: () => (
<ma-form
ref={formRef}
v-model={formData.value}
options={options.value}
columns={columnOptions.value}
>
{{
"inputPrepend-version": () => <span>V</span>
}}
</ma-form>
)
}}
</a-modal>
)
}
})
export default DutSubForm
// 组件类型导出
type DutSubFormOrigin = InstanceType<typeof DutSubForm>
export interface DutSubFormInstance extends DutSubFormOrigin {
open(nodeData: TreeNodeData): void
}

View File

@@ -0,0 +1,15 @@
import { ref, computed } from "vue"
import useCrudRef from "@/views/project/round/hooks/useCrudRef"
import tool from "@/utils/tool"
export default function useOptions(formRef: any) {
const options = ref({
showButtons: false,
labelAlign: "center"
})
const { crudColumns } = useCrudRef(undefined, formRef)
const columnOptions = computed(() => {
return tool.renameKeyInArray(crudColumns.value, "commonRules", "rules")
})
return { options, columnOptions }
}

View File

@@ -0,0 +1,15 @@
import { IDictData } from "@/utils/types/CommonType"
type BeiceTypeT = {
[K in keyof IDictData<string>]: string
}
const beiceType: BeiceTypeT[] = [
{ label: "源代码", value: "SO" },
{ label: "设计说明", value: "SJ" },
{ label: "需求文档", value: "XQ" },
{ label: "通信协议", value: "XY" },
{ label: "研制总要求", value: "YZ" }
]
export default beiceType

View File

@@ -0,0 +1,261 @@
import { ref } from "vue"
import dutApi from "@/api/project/dut"
import { useRoute } from "vue-router"
import { useTreeDataStore } from "@/store"
import beiceType from "@/views/project/round/beiceType"
/**
* 传入组件Ref返回其options和columnOptions
* @param crudRef crud组件的Ref注意不存在传递undefined
* @param formRef ma-form组件Ref
* @returns
*/
export default function useCrudRef(crudRef?, formRef?) {
// globals
const route = useRoute()
const projectId = ref(route.query.id)
const treeDataStore = useTreeDataStore()
const roundNumber = (route.query.key as any).split("-")[0]
// 计算注释率计算crud/form的数据判断
const calcPercent = () => {
if (crudRef) {
const formData = crudRef.value.getFormData()
const total_line = +formData.black_line + +formData.code_line + +formData.comment_line + +formData.mix_line
const comment_total = +formData.comment_line + +formData.mix_line
formData.comment_percent = `${(comment_total / total_line).toFixed(2).toString()}%`
} else if (formRef) {
const formData = formRef.value.getFormData()
const { code_line, comment_line, mix_line, black_line } = formData
const total_line = +black_line + +code_line + +comment_line + +mix_line
const comment_total = +comment_line + +mix_line
formData.comment_percent = `${(comment_total / total_line).toFixed(2).toString()}%`
}
}
// refs
const crudOptions = ref({
api: dutApi.getDutList,
add: { show: true, api: dutApi.save, text: "新增被测件" },
edit: { show: true, api: dutApi.update, text: "编辑被测件" },
delete: { show: true, api: dutApi.delete },
// 处理添加后函数
beforeOpenAdd: function () {
let round_str = parseInt(route.query.key as any) + 1
crudRef.value.crudFormRef.actionTitle = `${route.query.ident}>第${round_str}轮>被测件-`
return true
},
beforeOpenEdit: function (record) {
let round_str = parseInt(route.query.key as any) + 1
crudRef.value.crudFormRef.actionTitle = `${route.query.ident}>第${round_str}轮>被测件[${record.name}]-`
return true
},
afterAdd: (res) => {
let id = projectId.value
treeDataStore.updateDutTreeData(res.data, id)
},
afterEdit: (res) => {
let id = projectId.value
treeDataStore.updateDutTreeData(res.data, id)
},
afterDelete: (res, record) => {
let id = projectId.value
if (!record) {
record = { key: route.query.key + "-X" }
}
treeDataStore.updateDutTreeData(record, id)
// 清空行选择器
crudRef.value.tableRef.selectAll(false)
},
// 新增、编辑、删除均携带下面
parameters: {
projectId: route.query.id,
round: roundNumber
},
operationWidth: 500,
showIndex: false,
showTools: false,
rowSelection: { showCheckedAll: true },
searchColNumber: 3,
tablePagination: false,
operationColumnWidth: 200, // 操作列宽度
operationColumn: true,
operationColumnAlign: "center",
formOption: {
viewType: "drawer",
width: 600,
mask: false
}
})
const crudColumns = ref([
{
title: "ID",
width: 50,
align: "center",
hide: true,
dataIndex: "id",
commonRules: [{ required: true, message: "ID是必填" }],
validateTrigger: "blur",
display: false
},
{
title: "测件标识",
width: 150,
sortable: { sortDirections: ["ascend"] },
align: "center",
dataIndex: "ident",
search: true,
// 这里做的标识预填
addDefaultValue: route.query.ident + "-R" + (parseInt(route.query.key as any) + 1) + "-UT",
addDisabled: true,
editDisabled: true,
validateTrigger: "blur",
disabled: true,
placeholder: "被测件标识未空,请检查"
},
{
title: "被测类型",
align: "center",
dataIndex: "type",
search: true,
formType: "radio",
addDefaultValue: "SO",
dict: {
data: beiceType,
translation: true,
tagColors: { XQ: "blue", SO: "green", SJ: "orangered", XY: "pinkpurple", YZ: "red" }
},
onControl: (value) => {
if (value === "SO") {
return {
black_line: { display: true },
code_line: { display: true },
mix_line: { display: true },
comment_line: { display: true },
total_code_line: { display: true },
total_line: { display: true },
comment_percent: { display: true },
release_date: { display: false }
}
} else {
// 其他数据清除
return {
black_line: { display: false },
code_line: { display: false },
mix_line: { display: false },
comment_line: { display: false },
total_code_line: { display: false },
total_line: { display: false },
comment_percent: { display: false },
release_date: { display: true }
}
}
}
},
{
title: "被测件名",
width: 120,
align: "center",
dataIndex: "name",
search: true,
commonRules: [{ required: true, message: "被测件名称必填" }],
validateTrigger: "blur"
},
{
title: "版本",
align: "center",
dataIndex: "version",
search: true,
commonRules: [{ required: true, message: "版本必填" }],
validateTrigger: "blur",
help: "填写不带V字符",
openPrepend: true
},
{
title: "用户标识",
align: "center",
dataIndex: "ref",
search: true,
commonRules: [{ required: true, message: "用户标识必填" }],
validateTrigger: "blur",
help: "客户使用的标识"
},
{
title: "单位",
align: "center",
dataIndex: "release_union",
search: true,
commonRules: [{ required: true, message: "单位必选" }],
formType: "select",
dict: { url: "system/contact/index", props: { label: "name", value: "name" }, translation: true }
},
{
title: "发布时间",
dataIndex: "release_date",
hide: true,
commonRules: [{ required: true, message: "时间必填" }],
formType: "date"
},
{
title: "空行",
hide: true,
align: "center",
dataIndex: "black_line",
formType: "input-number",
commonRules: [{ required: true, message: "空行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "纯代码行",
hide: true,
align: "center",
dataIndex: "code_line",
formType: "input-number",
commonRules: [{ required: true, message: "纯代码行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "纯注释行",
hide: true,
align: "center",
dataIndex: "comment_line",
formType: "input-number",
commonRules: [{ required: true, message: "纯注释行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "混合行",
hide: true,
align: "center",
dataIndex: "mix_line",
formType: "input-number",
help: "混合行是指:代码中一行即包含代码也包含注释",
commonRules: [{ required: true, message: "混合行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "注释率 %",
align: "center",
dataIndex: "comment_percent",
placeholder: "计算注释率",
hide: true,
addDisabled: true,
editDisabled: true
}
])
return {
crudOptions,
crudColumns
}
}

View File

@@ -12,251 +12,15 @@
<script setup lang="jsx">
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import dutApi from "@/api/project/dut"
import { useTreeDataStore } from "@/store"
const treeDataStore = useTreeDataStore()
const route = useRoute()
const roundNumber = route.query.key.split("-")[0]
const projectId = ref(route.query.id)
import useCrudRef from "@/views/project/round/hooks/useCrudRef"
const crudRef = ref()
let beiceType = [
{ label: "源代码", value: "SO" },
{ label: "设计说明", value: "SJ" },
{ label: "需求文档", value: "XQ" },
{ label: "通信协议", value: "XY" },
{ label: "研制总要求", value: "YZ" }
]
// crud组件
const crudOptions = ref({
api: dutApi.getDutList,
add: { show: true, api: dutApi.save, text: "新增被测件" },
edit: { show: true, api: dutApi.update, text: "编辑被测件" },
delete: { show: true, api: dutApi.delete },
// 处理添加后函数
beforeOpenAdd: function () {
let round_str = parseInt(route.query.key) + 1
crudRef.value.crudFormRef.actionTitle = `${route.query.ident}>第${round_str}轮>被测件-`
return true
},
beforeOpenEdit: function (record) {
let round_str = parseInt(route.query.key) + 1
crudRef.value.crudFormRef.actionTitle = `${route.query.ident}>第${round_str}轮>被测件[${record.name}]-`
return true
},
afterAdd: (res) => {
let id = projectId.value
treeDataStore.updateDutTreeData(res.data, id)
},
afterEdit: (res) => {
let id = projectId.value
treeDataStore.updateDutTreeData(res.data, id)
},
afterDelete: (res, record) => {
let id = projectId.value
if (!record) {
record = { key: route.query.key + "-X" }
}
treeDataStore.updateDutTreeData(record, id)
// 清空行选择器
crudRef.value.tableRef.selectAll(false)
},
const { crudOptions, crudColumns } = useCrudRef(crudRef)
// 新增、编辑、删除均携带下面
parameters: {
projectId: route.query.id,
round: roundNumber
},
operationWidth: 500,
showIndex: false,
showTools: false,
rowSelection: { showCheckedAll: true },
searchColNumber: 3,
tablePagination: false,
operationColumnWidth: 200, // 操作列宽度
operationColumn: true,
operationColumnAlign: "center",
formOption: {
viewType: "drawer",
width: 600,
mask: false
}
})
// 1.计算注释率函数 -> 用于字段交互
const calcPercent = () => {
const formData = crudRef.value.getFormData()
const total_line = +formData.black_line + +formData.code_line + +formData.comment_line + +formData.mix_line
const comment_total = +formData.comment_line + +formData.mix_line
formData.comment_percent = `${(comment_total / total_line).toFixed(2).toString()}%`
const refreshCrudTable = () => {
crudRef.value.refresh()
}
const crudColumns = ref([
{
title: "ID",
width: 50,
align: "center",
hide: true,
dataIndex: "id",
commonRules: [{ required: true, message: "ID是必填" }],
validateTrigger: "blur"
},
{
title: "测件标识",
width: 150,
sortable: { sortDirections: ["ascend"] },
align: "center",
dataIndex: "ident",
search: true,
// 这里做的标识预填
addDefaultValue: route.query.ident + "-R" + (parseInt(route.query.key) + 1) + "-UT",
addDisabled: true,
editDisabled: true,
validateTrigger: "blur"
},
{
title: "被测类型",
align: "center",
dataIndex: "type",
search: true,
formType: "radio",
addDefaultValue: "SO",
dict: {
data: beiceType,
translation: true,
tagColors: { XQ: "blue", SO: "green", SJ: "orangered", XY: "pinkpurple", YZ: "red" }
},
onControl: (value) => {
if (value === "SO") {
return {
black_line: { display: true },
code_line: { display: true },
mix_line: { display: true },
comment_line: { display: true },
total_code_line: { display: true },
total_line: { display: true },
comment_percent: { display: true },
release_date: { display: false }
}
} else {
// 其他数据清除
return {
black_line: { display: false },
code_line: { display: false },
mix_line: { display: false },
comment_line: { display: false },
total_code_line: { display: false },
total_line: { display: false },
comment_percent: { display: false },
release_date: { display: true }
}
}
}
},
{
title: "被测件名",
width: 120,
align: "center",
dataIndex: "name",
search: true,
commonRules: [{ required: true, message: "被测件名称必填" }],
validateTrigger: "blur"
},
{
title: "版本",
align: "center",
dataIndex: "version",
search: true,
commonRules: [{ required: true, message: "版本必填" }],
validateTrigger: "blur",
help: "填写不带V字符",
openPrepend: true
},
{
title: "用户标识",
align: "center",
dataIndex: "ref",
search: true,
commonRules: [{ required: true, message: "用户标识必填" }],
validateTrigger: "blur",
help: "客户使用的标识"
},
{
title: "单位",
align: "center",
dataIndex: "release_union",
search: true,
commonRules: [{ required: true, message: "单位必选" }],
formType: "select",
dict: { url: "system/contact/index", props: { label: "name", value: "name" }, translation: true }
},
{
title: "发布时间",
dataIndex: "release_date",
hide: true,
commonRules: [{ required: true, message: "时间必填" }],
formType: "date"
},
{
title: "空行",
hide: true,
align: "center",
dataIndex: "black_line",
formType: "input-number",
commonRules: [{ required: true, message: "空行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "纯代码行",
hide: true,
align: "center",
dataIndex: "code_line",
formType: "input-number",
commonRules: [{ required: true, message: "纯代码行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "纯注释行",
hide: true,
align: "center",
dataIndex: "comment_line",
formType: "input-number",
commonRules: [{ required: true, message: "纯注释行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "混合行",
hide: true,
align: "center",
dataIndex: "mix_line",
formType: "input-number",
help: "混合行是指:代码中一行即包含代码也包含注释",
commonRules: [{ required: true, message: "混合行数必填" }],
min: 0,
onControl: () => {
calcPercent()
}
},
{
title: "注释率 %",
align: "center",
dataIndex: "comment_percent",
placeholder: "计算注释率",
hide: true,
addDisabled: true,
editDisabled: true
}
])
defineExpose({ refreshCrudTable })
defineOptions({
name: "round"