feat(all): update

src/api/index.js

@@ -9,40 +9,75 @@ export const login = (data, role) => {
     data,
   });
 };
-// 用户（列表）
-export const getUserData = (data) => {
+
+// 任务管理（列表）
+export const getTaskData = (data) => {
   return service.request({
     method: "POST",
-    url: "/User/List",
+    url: "/Task/List",
     data,
   });
 };
 
+// 设备分类-设备列表（列表）
+export const getDeviceClassListData = (data) => {
+  return service.request({
+    method: "POST",
+    url: "/DeviceClassList/List",
+    data,
+  });
+};
 
-// 任务管理（列表）
-export const getTaskData = (data) => {
+// 设备分类-设备列表（添加）
+export const addDeviceClassListData = (data) => {
   return service.request({
     method: "POST",
-    url: "/Task/List",
+    url: "/DeviceClassList/Add",
     data,
   });
 };
 
+// 设备分类-设备列表（编辑）
+export const editDeviceClassListData = (data) => {
+  return service.request({
+    method: "POST",
+    url: "/DeviceClassList/Up",
+    data,
+  });
+};
+
+// 设备分类-设备列表（删除）
+export const deleteDeviceClassListData = (data) => {
+  return service.request({
+    method: "POST",
+    url: "/DeviceClassList/Del",
+    data,
+  });
+};
 
 // 设备管理（列表）
-export const getDeviceClassData = (data) => {
+export const getDeviceData = (data) => {
   return service.request({
     method: "POST",
-    url: "/DeviceClassList/List",
+    url: "/Device/List",
     data,
   });
 };
 
-// 设备管理（添加）
-export const addDeviceClassData = (data) => {
+// 设备分类（获取）
+export const getDeviceClass = (data) => {
   return service.request({
     method: "POST",
-    url: "/DeviceClassList/Add",
+    url: "/DeviceClass/Get",
+    data,
+  });
+};
+
+// 设备分类（编辑）
+export const editDeviceClass = (data) => {
+  return service.request({
+    method: "POST",
+    url: "/DeviceClass/Up",
     data,
   });
 };

src/login/index.vue

@@ -64,9 +64,9 @@ const message = useMessage();
 
 // 验证表项的规则
 const rules = {
-  username: { required: true, message: "请输入用户名", trigger: "blur" },
-  password: { required: true, message: "请输入密码", trigger: "blur" },
-  role: { required: true, message: "请选择角色", trigger: ["blur", "change"] },
+  username: { required: true, message: "不能为空", trigger: "blur" },
+  password: { required: true, message: "不能为空", trigger: "blur" },
+  role: { required: true, message: "不能为空", trigger: ["blur", "change"] },
 };
 
 // 登录表单

src/views/project/equipment/index.vue

@@ -1,16 +1,49 @@
 <template>
   <n-space vertical>
-    <n-space justify="space-between">
-      <n-input-group>
-        <n-input style="width: 300px" placeholder="请输入项目名称" />
-        <n-button type="primary"> 搜索 </n-button>
-      </n-input-group>
-      <n-space>
-        <n-button type="primary">批量导入</n-button>
-        <n-button type="primary" @click="handleAdd">添加</n-button>
+    <n-page-header @back="() => $router.back()">
+      <template #title> 返回上一级 </template>
+      <template #header>
+        <n-breadcrumb>
+          <n-breadcrumb-item>任务管理</n-breadcrumb-item>
+          <n-breadcrumb-item>设备管理</n-breadcrumb-item>
+        </n-breadcrumb>
+      </template>
+      <n-space justify="space-between">
+        <n-space>
+          <n-input-group>
+            <n-input
+              style="width: 300px"
+              v-model:value="queryData.T_sn"
+              @clear="handleClear"
+              clearable
+              placeholder="请输入SN"
+            />
+            <n-button type="primary" @click="getDeviceClassListDataList">
+              搜索
+            </n-button>
+          </n-input-group>
+          <n-space align="center">
+            <span>分类名称 </span>
+            <n-input-group>
+              <n-input
+                style="width: 300px"
+                v-model:value="formValue.T_name"
+                placeholder="请输入分类名称"
+              />
+              <n-popconfirm @positive-click="editDeviceClassInfo">
+                <template #trigger>
+                  <n-button type="primary">编辑分类</n-button>
+                </template>
+                是否确认编辑？
+              </n-popconfirm>
+            </n-input-group>
+          </n-space>
+        </n-space>
+        <n-button type="primary" @click="showAddModal">批量导入</n-button>
       </n-space>
-    </n-space>
+    </n-page-header>
     <n-data-table
+      :key="(row) => row.Id"
       :columns="columns"
       :data="data"
       :pagination="pagination"
@@ -18,6 +51,7 @@
     />
   </n-space>
   <n-modal
+    :style="{ width: modal.title === '批量导入' ? '50%' : '' }"
     :show-icon="false"
     v-model:show="modal.showModal"
     preset="dialog"
@@ -33,10 +67,10 @@
       label-width="auto"
       :rules="rules"
     >
-      <n-form-item label="SN" path="T_sn">
-        <n-input v-model:value="formValue.T_sn" />
+      <n-form-item label="SN" path="T_sn" v-if="modal.title === '批量导入'">
+        <n-transfer v-model:value="formValue.T_sn" :options="deviceOptions" />
       </n-form-item>
-      <n-form-item label="ID" path="T_id">
+      <n-form-item label="编号" path="T_id" v-else>
         <n-input v-model:value="formValue.T_id" />
       </n-form-item>
     </n-form>
@@ -45,8 +79,16 @@
 
 <script setup>
 import { h } from "vue";
-import { NButton, NSpace } from "naive-ui";
-import { getDeviceClassData, addDeviceClassData } from "@/api";
+import { NButton, NSpace, NPopconfirm, NInput } from "naive-ui";
+import {
+  getDeviceClassListData,
+  addDeviceClassListData,
+  getDeviceData,
+  editDeviceClassListData,
+  deleteDeviceClassListData,
+  getDeviceClass,
+  editDeviceClass,
+} from "@/api";
 
 const message = useMessage();
 
@@ -58,23 +100,31 @@ const formRef = ref(null);
 
 // 验证表项的规则
 const rules = {
-  T_sn: { required: true, message: "不能为空", trigger: "blur" },
-  T_id: { required: true, message: "不能为空", trigger: "blur" },
+  T_sn: {
+    required: true,
+    message: "不能为空",
+    trigger: "change",
+    type: "array",
+  },
+  T_id: {
+    required: true,
+    message: "不能为空",
+    trigger: "blur",
+    type: "number",
+  },
 };
 
 // 查询参数
 const queryData = reactive({
   T_sn: "",
+  T_name: "",
 });
 
 // 需要展示的列
 const columns = [
   {
-    title: "#",
-    key: "key",
-    render: (_, index) => {
-      return `${index + 1}`;
-    },
+    title: "编号",
+    key: "T_id",
   },
   {
     title: "设备序列号",
@@ -83,32 +133,57 @@ const columns = [
   {
     title: "操作",
     key: "actions",
-    render() {
+    render(row) {
       return h(
         NSpace,
         {},
         {
           default: () =>
-            ["删除"].map((item) =>
-              h(
-                NButton,
-                {
-                  type: "error",
-                  size: "small",
-                  onClick: () => {},
-                },
-                { default: () => item }
-              )
-            ),
+            ["编辑编号", "删除"].map((item) => {
+              if (item === "编辑编号") {
+                return h(
+                  NButton,
+                  {
+                    type: "primary",
+                    size: "small",
+                    onClick: () => showEditModal(row),
+                  },
+                  { default: () => item }
+                );
+              } else {
+                return h(
+                  NPopconfirm,
+                  {
+                    onPositiveClick: () => deleteDeviceClassList(row),
+                  },
+                  {
+                    default: () => "是否确认删除？",
+                    trigger: () =>
+                      h(
+                        NButton,
+                        {
+                          type: "error",
+                          size: "small",
+                        },
+                        { default: () => item }
+                      ),
+                  }
+                );
+              }
+            }),
         }
       );
     },
   },
 ];
 
-// 设备列表
+// 设备分类-设备列表
 const data = ref([]);
 
+// 设备列表
+const deviceList = ref([]);
+const deviceOptions = ref([]);
+
 const pagination = ref(false);
 
 // 模态框数据源
@@ -117,34 +192,69 @@ const modal = reactive({
   showModal: false,
 });
 
+// 获取表项中收集到的值的对象
+const formValue = reactive({
+  T_sn: null,
+});
+
+// 输入框点击清空按钮时触发
+const handleClear = () => {
+  queryData.T_sn = "";
+  getDeviceClassListDataList();
+};
+
 const submitCallback = () => {
-  if (modal.title === "添加") {
-    addDeviceClass();
+  if (modal.title === "批量导入") {
+    formRef.value.validate(async (errors) => {
+      if (!errors) {
+        formValue.T_sn.forEach((T_sn) => {
+          const T_id = deviceList.value.find((item) => item.T_sn === T_sn).T_id;
+          addDeviceClassList(T_sn, T_id);
+        });
+      } else {
+        modal.showModal = true;
+        message.error("验证失败，请填写完整信息");
+      }
+    });
+  } else {
+    editDeviceClassList();
   }
 };
-const handleAdd = () => {
-  modal.title = "添加";
+
+// 显示编辑
+const showEditModal = (row) => {
+  modal.title = "编辑编号";
   modal.showModal = true;
+  Object.assign(formValue, row);
 };
 
-// 获取表项中收集到的值的对象
-const formValue = reactive({
-  T_sn: null,
-  T_id: null,
-});
+// 显示添加
+const showAddModal = () => {
+  modal.title = "批量导入";
+  modal.showModal = true;
+  Object.keys(formValue).forEach((key) => (formValue[key] = null));
+};
+
+// 删除
+const deleteDeviceClassList = async (row) => {
+  const { data: res } = await deleteDeviceClassListData({
+    Id: row.Id,
+  });
+  message.success(res.Msg);
+  getDeviceClassListDataList();
+};
 
-// 添加
-const addDeviceClass = () => {
+// 编辑编号
+const editDeviceClassList = () => {
   formRef.value.validate(async (errors) => {
     if (!errors) {
       try {
-        const { data: res } = await addDeviceClassData({
-          T_class: props.taskId,
-          T_sn: formValue.T_sn,
+        const { data: res } = await editDeviceClassListData({
+          Id: formValue.Id,
           T_id: formValue.T_id,
         });
         message.success(res.Msg);
-        getDeviceClassList();
+        getDeviceClassListDataList();
       } finally {
         formRef.value.restoreValidation();
         Object.keys(formValue).forEach((key) => (formValue[key] = ""));
@@ -156,9 +266,25 @@ const addDeviceClass = () => {
   });
 };
 
-// 设备管理（列表）
-const getDeviceClassList = async () => {
-  const { data: res } = await getDeviceClassData({
+// 批量导入
+const addDeviceClassList = async (T_sn, T_id) => {
+  try {
+    const { data: res } = await addDeviceClassListData({
+      T_class: props.taskId,
+      T_sn,
+      T_id,
+    });
+    message.success(res.Msg);
+    getDeviceClassListDataList();
+  } finally {
+    formRef.value.restoreValidation();
+    Object.keys(formValue).forEach((key) => (formValue[key] = ""));
+  }
+};
+
+// 设备分类-设备列表（列表）
+const getDeviceClassListDataList = async () => {
+  const { data: res } = await getDeviceClassListData({
     T_class: props.taskId,
     T_sn: queryData.T_sn,
   });
@@ -166,7 +292,42 @@ const getDeviceClassList = async () => {
   data.value = res.Data.List;
 };
 
-getDeviceClassList();
+// 设备管理（列表）
+const getDeviceList = async () => {
+  const { data: res } = await getDeviceData({
+    T_MSISDN: "",
+    T_sn: "",
+    page: "",
+    page_z: "",
+  });
+  deviceOptions.value = res.Data.List.map((item) => ({
+    label: item.T_sn,
+    value: item.T_sn,
+  }));
+  deviceList.value = res.Data.List;
+};
+
+// 设备分类（修改）
+const editDeviceClassInfo = async () => {
+  const { data: res } = await editDeviceClass({
+    Id: props.taskId,
+    T_name: formValue.T_name,
+  });
+  message.success(res.Msg);
+  getDeviceClassInfo();
+};
+
+// 设备分类（获取）
+const getDeviceClassInfo = async () => {
+  const { data: res } = await getDeviceClass({
+    Id: props.taskId,
+  });
+  formValue.T_name = res.Data.T_name;
+};
+
+getDeviceClassInfo();
+getDeviceList();
+getDeviceClassListDataList();
 </script>
 
 <style scoped></style>

src/views/project/index.vue

@@ -1,87 +1,19 @@
 <template>
-  <n-space vertical>
-    <n-space justify="end">
-      <n-button type="primary" @click="showAddModal">添加</n-button>
-    </n-space>
-    <n-data-table
-      :columns="columns"
-      :data="data"
-      :pagination="pagination"
-      :bordered="false"
-    />
-  </n-space>
-  <n-modal
-    style="width: 30%"
-    :show-icon="false"
-    v-model:show="modal.showModal"
-    preset="dialog"
-    :title="modal.title"
-    positive-text="提交"
-    negative-text="取消"
-    @positive-click="submitCallback"
-  >
-    <n-form
-      ref="formRef"
-      :model="formValue"
-      label-placement="left"
-      label-width="auto"
-      :rules="rules"
-    >
-      <n-form-item label="任务名称" path="T_name">
-        <n-input v-model:value="formValue.T_name" clearable />
-      </n-form-item>
-      <n-form-item label="用户" path="T_uuid">
-        <n-select
-          v-model:value="formValue.T_uuid"
-          :options="userList"
-          label-field="T_user"
-          value-field="T_uuid"
-          clearable
-        />
-      </n-form-item>
-      <n-form-item label="任务模板" path="T_name">
-        <n-input v-model:value="formValue.T_name" clearable />
-      </n-form-item>
-      <n-form-item label="截止时间" path="T_deadline">
-        <n-date-picker
-          v-model:formatted-value="formValue.T_deadline"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="datetime"
-          clearable
-          class="w-full"
-        />
-      </n-form-item>
-      <n-form-item label="数据采集负责人" path="T_name">
-        <n-input v-model:value="formValue.T_name" clearable />
-      </n-form-item>
-      <n-form-item label="报告编写负责人" path="T_name">
-        <n-input v-model:value="formValue.T_name" clearable />
-      </n-form-item>
-      <n-form-item label="交付审核负责人" path="T_name">
-        <n-input v-model:value="formValue.T_name" clearable />
-      </n-form-item>
-      <n-form-item label="实施方案负责人" path="T_name">
-        <n-input v-model:value="formValue.T_name" clearable />
-      </n-form-item>
-    </n-form>
-  </n-modal>
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    :bordered="false"
+  />
 </template>
 
 <script setup>
 import { h } from "vue";
 import { NButton, NSpace } from "naive-ui";
-import { getTaskData, getUserData } from "@/api";
+import { getTaskData } from "@/api";
 
 const router = useRouter();
 
-const formRef = ref(null);
-
-// 验证表项的规则
-const rules = {
-  T_name: { required: true, message: "请输入名称", trigger: "blur" },
-  T_text: { required: true, message: "请输入描述", trigger: "blur" },
-};
-
 // 查询参数
 const queryData = reactive({
   T_uuid: "",
@@ -93,27 +25,6 @@ const queryData = reactive({
 // 任务列表
 const data = ref([]);
 
-// 用户列表
-const userList = ref([]);
-
-// 获取表项中收集到的值的对象
-const formValue = reactive({
-  T_name: null,
-  T_uuid: null,
-  T_VerifyTemplate_id: null,
-  T_deadline: null,
-  T_collection: null,
-  T_reporting: null,
-  T_delivery: null,
-  T_scheme: null,
-});
-
-// 模态框数据源
-const modal = reactive({
-  title: "",
-  showModal: false,
-});
-
 // 需要展示的列
 const columns = [
   {
@@ -193,44 +104,6 @@ const columns = [
   },
 ];
 
-// 执行 positive 时执行的回调函数
-const submitCallback = () => {
-  if (modal.title === "添加") {
-    console.log("添加");
-  } else {
-    console.log("添加");
-  }
-};
-
-// 显示添加
-const showAddModal = () => {
-  modal.title = "添加";
-  modal.showModal = true;
-  Object.keys(formValue).forEach((key) => (formValue[key] = null));
-};
-
-// 添加
-// const addProject = () => {
-//   formRef.value.validate(async (errors) => {
-//     if (!errors) {
-//       try {
-//         const { data: res } = await addProjectData({
-//           T_name: formValue.T_name,
-//           T_text: formValue.T_text,
-//         });
-//         message.success(res.Msg);
-//         getProjectList();
-//       } finally {
-//         formRef.value.restoreValidation();
-//         Object.keys(formValue).forEach((key) => (formValue[key] = ""));
-//       }
-//     } else {
-//       modal.showModal = true;
-//       message.error("验证失败，请填写完整信息");
-//     }
-//   });
-// };
-
 // 分页数据源
 const pagination = reactive({
   page: queryData.page,
@@ -243,12 +116,6 @@ const pagination = reactive({
   },
 });
 
-// 用户（列表）
-const getUserList = async () => {
-  const { data: res } = await getUserData({});
-  userList.value = res.Data.List;
-};
-
 // 任务管理（列表）
 const getDataList = async () => {
   const { data: res } = await getTaskData(queryData);
@@ -256,7 +123,6 @@ const getDataList = async () => {
   data.value = res.Data.List;
 };
 
-getUserList();
 getDataList();
 </script>