|
|
@@ -7,7 +7,7 @@
|
|
|
</n-input-group>
|
|
|
<n-space>
|
|
|
<n-button type="primary">批量导入</n-button>
|
|
|
- <n-button type="primary" @click="handleAdd">新增</n-button>
|
|
|
+ <n-button type="primary" @click="handleAdd">添加</n-button>
|
|
|
</n-space>
|
|
|
</n-space>
|
|
|
<n-data-table
|
|
|
@@ -27,23 +27,17 @@
|
|
|
@positive-click="submitCallback"
|
|
|
>
|
|
|
<n-form
|
|
|
- :model="form"
|
|
|
+ ref="formRef"
|
|
|
+ :model="formValue"
|
|
|
label-placement="left"
|
|
|
label-width="auto"
|
|
|
- require-mark-placement="right-hanging"
|
|
|
+ :rules="rules"
|
|
|
>
|
|
|
- <n-form-item label="项目名称" path="inputValue">
|
|
|
- <n-input v-model:value="form.inputValue" />
|
|
|
+ <n-form-item label="SN" path="T_sn">
|
|
|
+ <n-input v-model:value="formValue.T_sn" />
|
|
|
</n-form-item>
|
|
|
- <n-form-item label="描述" path="textareaValue">
|
|
|
- <n-input
|
|
|
- v-model:value="form.textareaValue"
|
|
|
- type="textarea"
|
|
|
- :autosize="{
|
|
|
- minRows: 3,
|
|
|
- maxRows: 5,
|
|
|
- }"
|
|
|
- />
|
|
|
+ <n-form-item label="ID" path="T_id">
|
|
|
+ <n-input v-model:value="formValue.T_id" />
|
|
|
</n-form-item>
|
|
|
</n-form>
|
|
|
</n-modal>
|
|
|
@@ -52,74 +46,127 @@
|
|
|
<script setup>
|
|
|
import { h } from "vue";
|
|
|
import { NButton, NSpace } from "naive-ui";
|
|
|
+import { getDeviceClassData, addDeviceClassData } from "@/api";
|
|
|
|
|
|
-const createColumns = () => {
|
|
|
- return [
|
|
|
- {
|
|
|
- title: "项目名称",
|
|
|
- key: "no",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "描述",
|
|
|
- key: "title",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "时间",
|
|
|
- key: "length",
|
|
|
- },
|
|
|
- {
|
|
|
- title: "操作",
|
|
|
- key: "actions",
|
|
|
- render() {
|
|
|
- return h(
|
|
|
- NSpace,
|
|
|
- {},
|
|
|
- {
|
|
|
- default: () =>
|
|
|
- ["删除"].map((item) =>
|
|
|
- h(
|
|
|
- NButton,
|
|
|
- {
|
|
|
- type: "error",
|
|
|
- size: "small",
|
|
|
- onClick: () => {},
|
|
|
- },
|
|
|
- { default: () => item }
|
|
|
- )
|
|
|
- ),
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- ];
|
|
|
+const message = useMessage();
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ taskId: String,
|
|
|
+});
|
|
|
+
|
|
|
+const formRef = ref(null);
|
|
|
+
|
|
|
+// 验证表项的规则
|
|
|
+const rules = {
|
|
|
+ T_sn: { required: true, message: "不能为空", trigger: "blur" },
|
|
|
+ T_id: { required: true, message: "不能为空", trigger: "blur" },
|
|
|
};
|
|
|
|
|
|
-const data = [
|
|
|
- { no: 3, title: "Wonderwall", length: "4:18" },
|
|
|
- { no: 4, title: "Don't Look Back in Anger", length: "4:48" },
|
|
|
- { no: 12, title: "Champagne Supernova", length: "7:27" },
|
|
|
+// 查询参数
|
|
|
+const queryData = reactive({
|
|
|
+ T_sn: "",
|
|
|
+});
|
|
|
+
|
|
|
+// 需要展示的列
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: "#",
|
|
|
+ key: "key",
|
|
|
+ render: (_, index) => {
|
|
|
+ return `${index + 1}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "设备序列号",
|
|
|
+ key: "T_sn",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "操作",
|
|
|
+ key: "actions",
|
|
|
+ render() {
|
|
|
+ return h(
|
|
|
+ NSpace,
|
|
|
+ {},
|
|
|
+ {
|
|
|
+ default: () =>
|
|
|
+ ["删除"].map((item) =>
|
|
|
+ h(
|
|
|
+ NButton,
|
|
|
+ {
|
|
|
+ type: "error",
|
|
|
+ size: "small",
|
|
|
+ onClick: () => {},
|
|
|
+ },
|
|
|
+ { default: () => item }
|
|
|
+ )
|
|
|
+ ),
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
-const columns = createColumns({});
|
|
|
+// 设备列表
|
|
|
+const data = ref([]);
|
|
|
+
|
|
|
const pagination = ref(false);
|
|
|
|
|
|
+// 模态框数据源
|
|
|
const modal = reactive({
|
|
|
title: "",
|
|
|
showModal: false,
|
|
|
});
|
|
|
|
|
|
const submitCallback = () => {
|
|
|
- console.log("确定");
|
|
|
+ if (modal.title === "添加") {
|
|
|
+ addDeviceClass();
|
|
|
+ }
|
|
|
};
|
|
|
const handleAdd = () => {
|
|
|
+ modal.title = "添加";
|
|
|
modal.showModal = true;
|
|
|
- modal.title = "新增";
|
|
|
};
|
|
|
|
|
|
-const form = reactive({
|
|
|
- inputValue: "",
|
|
|
- textareaValue: "",
|
|
|
+// 获取表项中收集到的值的对象
|
|
|
+const formValue = reactive({
|
|
|
+ T_sn: null,
|
|
|
+ T_id: null,
|
|
|
});
|
|
|
+
|
|
|
+// 添加
|
|
|
+const addDeviceClass = () => {
|
|
|
+ formRef.value.validate(async (errors) => {
|
|
|
+ if (!errors) {
|
|
|
+ try {
|
|
|
+ const { data: res } = await addDeviceClassData({
|
|
|
+ T_class: props.taskId,
|
|
|
+ T_sn: formValue.T_sn,
|
|
|
+ T_id: formValue.T_id,
|
|
|
+ });
|
|
|
+ message.success(res.Msg);
|
|
|
+ getDeviceClassList();
|
|
|
+ } finally {
|
|
|
+ formRef.value.restoreValidation();
|
|
|
+ Object.keys(formValue).forEach((key) => (formValue[key] = ""));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ modal.showModal = true;
|
|
|
+ message.error("验证失败，请填写完整信息");
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 设备管理（列表）
|
|
|
+const getDeviceClassList = async () => {
|
|
|
+ const { data: res } = await getDeviceClassData({
|
|
|
+ T_class: props.taskId,
|
|
|
+ T_sn: queryData.T_sn,
|
|
|
+ });
|
|
|
+ pagination.itemCount = res.Data.Num;
|
|
|
+ data.value = res.Data.List;
|
|
|
+};
|
|
|
+
|
|
|
+getDeviceClassList();
|
|
|
</script>
|
|
|
|
|
|
<style scoped></style>
|
HuCheng