文档片段全面改进，不使用render
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
import { defineComponent } from "vue"
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { TreeNodeData } from "@arco-design/web-vue"
|
||||
import { useTreeDataStore } from "@/store"
|
||||
import testDemandAPI from "@/api/project/testDemand"
|
||||
import useOptions from "./useOptions"
|
||||
import subFormHooks from "@/views/project/projPublicHooks/subFormHooks"
|
||||
import useBeforeCancel from "@/views/project/projPublicHooks/useBeforeCancel"
|
||||
import { cloneDeep } from "lodash-es"
|
||||
|
||||
const DemandSubForm = defineComponent({
|
||||
name: "DemandSubFormForm",
|
||||
@@ -25,6 +27,8 @@ const DemandSubForm = defineComponent({
|
||||
// 设置表单名称
|
||||
title.value = nodeData.title!
|
||||
const res = await testDemandAPI.getTestDemandOne({ project_id, key }) // **API变化**
|
||||
// 得到数据时候将beforeFormContent搞定
|
||||
beforeFormContent.value = cloneDeep(res.data.testContent)
|
||||
// 更新表单
|
||||
formData.value = res.data // **属性变化**
|
||||
formData.value.round = key.split("-")[0]
|
||||
@@ -38,10 +42,13 @@ const DemandSubForm = defineComponent({
|
||||
// out use
|
||||
expose({ open })
|
||||
|
||||
// hook-判断是否更变内容关闭-只用于测试项和测试用例
|
||||
const beforeFormContent = ref<any>(undefined)
|
||||
const { handleBeforeCancel } = useBeforeCancel(formData, beforeFormContent, visible)
|
||||
// Dom
|
||||
return () => (
|
||||
// 注意v-model:visible是不能放在对象解构的
|
||||
<a-modal {...modalOptions} v-model:visible={visible.value}>
|
||||
<a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
|
||||
{{
|
||||
title: () => <span>[设计需求]-{title.value}</span>,
|
||||
default: () => (
|
||||
|
||||
@@ -58,7 +58,7 @@ export default function (crudOrFormRef: any) {
|
||||
dict: { name: "testType", translation: true, props: { label: "title", value: "key" } },
|
||||
extra: "支持拼音搜索，例如：gn可以搜索出功能测试",
|
||||
// 这是arco的属性，所以在ma-crud和ma-form可以直接使用arco属性和事件（事件+onXXX）
|
||||
filterOption: function (inputValue, selectedOption) {
|
||||
filterOption: function (inputValue: any, selectedOption: any) {
|
||||
if (inputValue) {
|
||||
let matchRes = PinYinMatch.match(selectedOption.label, inputValue)
|
||||
if (matchRes) {
|
||||
@@ -91,7 +91,7 @@ export default function (crudOrFormRef: any) {
|
||||
dataIndex: "testDesciption",
|
||||
formType: "textarea",
|
||||
maxLength: 256,
|
||||
placeholder: "FPGA-老版本需填写!!!"
|
||||
placeholder: "请填写整体测试项的描述"
|
||||
},
|
||||
{
|
||||
title: "测试子项",
|
||||
@@ -99,53 +99,28 @@ export default function (crudOrFormRef: any) {
|
||||
dataIndex: "testContent",
|
||||
commonRules: [{ required: true, message: "测试方法是必填的" }],
|
||||
formType: "children-form",
|
||||
type: "group",
|
||||
formList: [
|
||||
{
|
||||
title: "子项名称",
|
||||
dataIndex: "subName",
|
||||
placeholder: "对应测试项描述标题，和测试方法的标题",
|
||||
rules: [{ required: true, message: "测试子项名称必填" }],
|
||||
onChange: (ev) => {
|
||||
onChange: (ev: any) => {
|
||||
// 取出子项的对象数组
|
||||
const subItemFormData = crudOrFormRef.value.getFormData().testContent
|
||||
// 取出充分性条件字段字符串
|
||||
const mapRes = subItemFormData.map((subItem) => subItem.subName)
|
||||
const mapRes = subItemFormData.map((subItem: any) => subItem.subName)
|
||||
crudOrFormRef.value.getFormData().adequacy = `测试用例覆盖${mapRes.join(
|
||||
"、"
|
||||
)}子项要求的全部内容。\n所有用例执行完毕，对于未执行的用例说明未执行原因。`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "子项描述",
|
||||
dataIndex: "subDesc",
|
||||
formType: "textarea",
|
||||
placeholder: "对应大纲测试项表格的测试项描述，FPGA-老模版不用填写!!!"
|
||||
// rules: [{ required: true, message: "测试子项描述必填" }]
|
||||
title: "操作与预期",
|
||||
dataIndex: "subStep",
|
||||
formType: "steptable"
|
||||
},
|
||||
{
|
||||
title: "条件",
|
||||
dataIndex: "condition",
|
||||
formType: "textarea",
|
||||
placeholder: "在什么环境和前置条件下"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "operation",
|
||||
formType: "textarea",
|
||||
placeholder: "通过xxx操作"
|
||||
},
|
||||
{
|
||||
title: "观察",
|
||||
dataIndex: "observe",
|
||||
formType: "textarea",
|
||||
placeholder: "查看xxx内容"
|
||||
},
|
||||
{
|
||||
title: "期望",
|
||||
dataIndex: "expect",
|
||||
formType: "textarea",
|
||||
placeholder: "xxx结果正确"
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
32
cdTMP/src/views/project/projPublicHooks/useBeforeCancel.ts
Normal file
32
cdTMP/src/views/project/projPublicHooks/useBeforeCancel.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { isEqual } from "lodash-es"
|
||||
import { getCurrentInstance } from "vue"
|
||||
|
||||
/**
|
||||
* 该hook为测试项子项和测试用例步骤设计，当其改变时候弹窗通知用户
|
||||
*/
|
||||
export default function useBeforeCancel(formData: any, beforeFormContent: any, visible: any) {
|
||||
const app = getCurrentInstance()!.appContext.config.globalProperties
|
||||
const handleBeforeCancel = () => {
|
||||
if (!beforeFormContent.value) {
|
||||
return true
|
||||
}
|
||||
const content = formData.value.testContent || formData.value.testStep
|
||||
const iuEqualValue = isEqual(content, beforeFormContent.value)
|
||||
!iuEqualValue &&
|
||||
app.$modal.confirm({
|
||||
title: "测试项步骤内容你已改动，是否保留您编写的测试项/测试用例步骤数据？",
|
||||
content: "",
|
||||
okText: "返回重新编辑",
|
||||
cancelText: "取消",
|
||||
simple: true,
|
||||
onOk: () => {
|
||||
visible.value = true
|
||||
},
|
||||
onCancel: () => {}
|
||||
})
|
||||
return true
|
||||
}
|
||||
return {
|
||||
handleBeforeCancel
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import { defineComponent } from "vue"
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { Message, TreeNodeData } from "@arco-design/web-vue"
|
||||
import { useTreeDataStore } from "@/store"
|
||||
import caseApi from "@/api/project/case"
|
||||
import useOptions from "./useOptions"
|
||||
import subFormHooks from "@/views/project/projPublicHooks/subFormHooks"
|
||||
import useBeforeCancel from "@/views/project/projPublicHooks/useBeforeCancel"
|
||||
import { cloneDeep } from "lodash-es"
|
||||
|
||||
const CaseSubForm = defineComponent({
|
||||
name: "DemandSubFormForm",
|
||||
@@ -26,6 +28,8 @@ const CaseSubForm = defineComponent({
|
||||
title.value = nodeData.title!
|
||||
// 注意这里因为case接口原因，这里需要projectId!!!!!!!!!!!!!!!
|
||||
const res = await caseApi.getCaseOne({ projectId: project_id, key }) // **API变化**
|
||||
// 得到数据时候将beforeFormContent搞定
|
||||
beforeFormContent.value = cloneDeep(res.data.testStep)
|
||||
// 更新表单
|
||||
formData.value = res.data // **属性变化**
|
||||
formData.value.round = key.split("-")[0]
|
||||
@@ -41,10 +45,14 @@ const CaseSubForm = defineComponent({
|
||||
// out use
|
||||
expose({ open })
|
||||
|
||||
// hook-判断是否更变内容关闭-只用于测试项和测试用例
|
||||
const beforeFormContent = ref<any>(undefined)
|
||||
const { handleBeforeCancel } = useBeforeCancel(formData, beforeFormContent, visible)
|
||||
|
||||
// Dom
|
||||
return () => (
|
||||
// 注意v-model:visible是不能放在对象解构的
|
||||
<a-modal {...modalOptions} v-model:visible={visible.value}>
|
||||
<a-modal {...modalOptions} v-model:visible={visible.value} on-before-cancel={handleBeforeCancel}>
|
||||
{{
|
||||
title: () => <span>[设计需求]-{title.value}</span>,
|
||||
default: () => (
|
||||
|
||||
@@ -157,7 +157,7 @@ export default function (crudOrFormRef: any, problemFormRef?: any) {
|
||||
}
|
||||
],
|
||||
formType: "children-form",
|
||||
type: "group",
|
||||
type: "group", // 注意这里可能改样式"group"/"table"
|
||||
formList: [
|
||||
{
|
||||
title: "操作",
|
||||
|
||||
Reference in New Issue
Block a user