feat: 设备新增功能

src/api/customer/index.ts

@@ -0,0 +1,11 @@
+import { AxiosPromise } from "axios";
+import { CustomerResult } from "@/api/customer/types";
+import request from "@/utils/request";
+
+export function customerPage(data: SelectForm): AxiosPromise<CustomerResult> {
+  return request({
+    url: "/api/customer/v1/customer-page",
+    method: "POST",
+    data,
+  });
+}

src/api/customer/types.ts

@@ -0,0 +1,8 @@
+export interface CustomerVO {
+  customId?: number;
+  regionAreaId?: number;
+  customType?: string;
+  customStatus?: string;
+  regionAreaName?: string;
+}
+export type CustomerResult = PageResult<CustomerVO[]>;

src/api/resources-equipment/index.ts

@@ -1,8 +1,10 @@
 import { AxiosPromise } from "axios";
 import {
+  EquipmentAddForm,
   EquipmentEditForm,
   EquipmentResult,
-  EquipmentTableResult
+  EquipmentTableResult,
+  PrivateProfile,
 } from "@/api/resources-equipment/types";
 import request from "@/utils/request";
 
@@ -33,3 +35,29 @@ export function editResourceEquipment(
     data,
   });
 }
+export function addResourceEquipment(
+  data: EquipmentAddForm
+): AxiosPromise<number> {
+  return request({
+    url: "/api/equipment/v1/resource-add",
+    method: "POST",
+    data,
+  });
+}
+
+export function privateProfile(
+  data: PrivateProfile
+): AxiosPromise<EquipmentTableResult> {
+  return request({
+    url: "/api/equipment/v1/private-file",
+    method: "POST",
+    data,
+  });
+}
+
+export function bindingCustomAPI(devId: number, customId: number) {
+  return request({
+    url: `/api/equipment/v1/binding-custom/${devId}/${customId}`,
+    method: "PUT",
+  });
+}

src/api/resources-equipment/types.ts

@@ -81,4 +81,18 @@ export interface EquipmentEditForm {
 }
 export interface EquipmentAddForm extends EquipmentEditForm {
   regionAreaId?: number;
+  devTypeId?: number;
 }
+export interface PrivateProfile {
+  devId?: number;
+
+  fileName?: string;
+
+  fileDesc?: string;
+
+  fileType?: string;
+
+  fileUrl?: string;
+}
+
+

src/views/resources/equipment/components/AddEquipment.vue

@@ -71,8 +71,8 @@
                   type="primary"
                   link
                   @click="redirect(scope.row.devTypeId)"
-                  >{{ scope.row.devType }}</el-button
-                >
+                  >{{ scope.row.devType }}
+                </el-button>
               </template>
             </el-table-column>
             <el-table-column
@@ -102,8 +102,13 @@
       </el-card>
     </div>
     <div v-show="active === 1">
-      <el-card>
-        <el-form :model="addForm">
+      <el-card shadow="never">
+        <el-form
+          :model="addForm"
+          v-loading="loading"
+          ref="addFormRef"
+          :rules="rules"
+        >
           <el-descriptions title="新增设备信息" :column="2" border>
             <el-descriptions-item
               label="设备序列号"
@@ -194,10 +199,174 @@
             />
           </el-descriptions>
         </el-form>
+        <!--        -->
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end">
+            <el-button type="primary" plain @click="lastStep">上一步</el-button>
+            <el-button
+              type="primary"
+              v-if="fileForm.devId != undefined"
+              @click="next2"
+              >下一步</el-button
+            >
+            <el-button type="primary" v-else @click="submitStep1(addFormRef)"
+              >提交
+            </el-button>
+          </div>
+        </template>
+      </el-card>
+    </div>
+    <div v-show="active === 2">
+      <el-card shadow="never">
+        <el-form :model="fileForm" v-loading="loading">
+          <el-descriptions title="终端私有配置文件" :column="2" border>
+            <el-descriptions-item
+              label="文件名称"
+              label-align="left"
+              align="center"
+              label-class-name="my-label"
+              class-name="my-content"
+              width="180px"
+            >
+              <el-form-item style="margin-bottom: 0" prop="fileName">
+                <el-input v-model="fileForm.fileName" />
+              </el-form-item>
+            </el-descriptions-item>
+            <el-descriptions-item
+              label="文件描述信息"
+              label-align="left"
+              align="center"
+              label-class-name="my-label"
+              class-name="my-content"
+              width="180px"
+            >
+              <el-form-item style="margin-bottom: 0" prop="fileDesc">
+                <el-input
+                  type="textarea"
+                  :rows="1"
+                  v-model="fileForm.fileDesc"
+                />
+              </el-form-item>
+            </el-descriptions-item>
+            <el-descriptions-item
+              label="文件上传"
+              label-align="left"
+              align="center"
+              label-class-name="my-label"
+              class-name="my-content"
+              width="180px"
+            >
+              <el-upload
+                drag
+                action="#"
+                :limit="1"
+                :auto-upload="false"
+                v-model:file-list="fileList"
+              >
+                <el-icon class="el-icon--upload">
+                  <upload-filled />
+                </el-icon>
+                <div class="el-upload__text">拖拽上传 或 <em>点击上传</em></div>
+              </el-upload>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-form>
         <template #footer>
           <div style="display: flex; justify-content: flex-end">
             <el-button type="primary" plain @click="lastStep">上一步</el-button>
-            <el-button type="primary">下一步</el-button>
+            <el-button type="primary" @click="next3">下一步</el-button>
+            <el-button
+              type="primary"
+              v-if="fileForm.fileUrl === undefined"
+              plain
+              @click="submitFile"
+              >提交</el-button
+            >
+          </div>
+        </template>
+      </el-card>
+    </div>
+    <div v-show="active === 3">
+      <div class="search-container">
+        <el-form :model="queryForm" :inline="true">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="查询条件">
+                <el-select
+                  v-model="queryForm.selectName"
+                  placeholder="请选择"
+                  style="width: 240px"
+                  clearable
+                >
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6" v-if="queryForm.selectName != undefined">
+              <el-input
+                v-model="queryForm.selectValue"
+                placeholder="请输入"
+                style="width: 300px"
+              />
+            </el-col>
+            <el-col :span="buttonColSpan">
+              <el-form-item>
+                <el-button type="primary" :icon="Search" @click="queryCustomer"
+                  >搜索</el-button
+                >
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <el-card shadow="never">
+        <template #header>
+          <div style="display: flex; justify-content: flex-end">
+            <el-button type="primary" :icon="Position" @click="bindingCustom"
+              >绑定</el-button
+            >
+          </div>
+        </template>
+        <div class="any-table">
+          <el-table
+            :data="customData"
+            max-height="300"
+            v-loading="loading"
+            highlight-current-row
+            @current-change="handleCustomerChange"
+          >
+            <el-table-column
+              prop="customType"
+              label="客户类型"
+              align="center"
+            />
+            <el-table-column
+              prop="regionAreaName"
+              label="客户系统管理域"
+              align="center"
+            />
+            <el-table-column
+              prop="customStatus"
+              label="客户状态"
+              align="center"
+            />
+          </el-table>
+          <pagination
+            v-if="customTotal > 0"
+            v-model:total="customTotal"
+            v-model:page="queryForm.pageNum"
+            v-model:limit="queryForm.pageSize"
+            @pagination="queryCustomer"
+          />
+        </div>
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end">
+            <el-button type="primary" @click="lastStep">上一步</el-button>
           </div>
         </template>
       </el-card>
@@ -213,9 +382,23 @@ import {
   tr069BindingDevTypePage,
 } from "@/api/device-type";
 import { Tr069DevTypeQuery, Tr069DevTypeVO } from "@/api/tr069/types";
-import { ElTable } from "element-plus";
-import { EquipmentAddForm } from "@/api/resources-equipment/types";
+import { ElTable, FormInstance, FormRules, UploadUserFile } from "element-plus";
+import {
+  EquipmentAddForm,
+  PrivateProfile,
+} from "@/api/resources-equipment/types";
 import { getDomainOptions } from "@/api/domain";
+import { Position, Search, UploadFilled } from "@element-plus/icons-vue";
+import { uploadApi } from "@/api/file";
+import {
+  addResourceEquipment,
+  bindingCustomAPI,
+  privateProfile,
+} from "@/api/resources-equipment";
+import { customerPage } from "@/api/customer";
+import { CustomerVO } from "@/api/customer/types";
+import { add } from "lodash-es";
+
 const multiple = ref<Tr069DevTypeVO>({});
 const searchForm = ref<Tr069DevTypeQuery>({
   devTypeName: "",
@@ -225,9 +408,9 @@ const searchForm = ref<Tr069DevTypeQuery>({
   pageSize: 10,
 });
 const addForm = ref<EquipmentAddForm>({});
+const addFormRef = ref<FormInstance>();
 const route = useRoute();
 const active = ref<number>(0);
-let tr069VerId: number = parseInt(<string>route.params.tr069VerId);
 const vendorNameOption = ref<OptionType[]>([]);
 const typeNameOption = ref<OptionType[]>([]);
 const hardVerOption = ref<OptionType[]>([]);
@@ -235,6 +418,26 @@ const tableData = ref<Tr069DevTypeVO[]>([]);
 const total = ref<number>(0);
 const loading = ref<boolean>(false);
 const router = useRouter();
+const fileForm = ref<PrivateProfile>({
+  fileType: "5",
+});
+const fileList = ref<UploadUserFile[]>([]);
+const rules = reactive<FormRules<EquipmentAddForm>>({
+  devSno: [{ required: true, message: "请填写设备序列号", trigger: "blur" }],
+  regionAreaId: [
+    { required: true, message: "请选择系统管理域", trigger: "blur" },
+  ],
+});
+const queryForm = ref<SelectForm>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const customData = ref<CustomerVO[]>([]);
+const customTotal = ref<number>(0);
+const options = ref<OptionType[]>([{ label: "客户名称", value: "customName" }]);
+const buttonColSpan = computed(() => {
+  return queryForm.value.selectName === undefined ? 18 : 12;
+});
 const loadVendorNameOption = async () => {
   await getVendorNameOption().then(({ data }) => {
     vendorNameOption.value = data;
@@ -252,6 +455,7 @@ const loadHardVerOption = async () => {
 };
 const handleCurrentChange = (val: Tr069DevTypeVO) => {
   multiple.value = val;
+  addForm.value.devTypeId = val.devTypeId;
 };
 const loadTr069DevTypePage = () => {
   loading.value = true;
@@ -271,11 +475,13 @@ const redirect = (devTypeId: number) => {
   });
 };
 const domainOptions = ref<OptionType[]>([]);
+
 async function loadDomainOptions() {
   await getDomainOptions().then(({ data }) => {
     domainOptions.value = data;
   });
 }
+
 const next1 = () => {
   if (multiple.value.devTypeId === undefined) {
     ElMessage({
@@ -287,6 +493,12 @@ const next1 = () => {
   }
   active.value = 1;
 };
+const next2 = () => {
+  active.value = 2;
+};
+const next3 = () => {
+  active.value = 3;
+};
 const lastStep = () => {
   active.value = active.value - 1;
 };
@@ -298,7 +510,105 @@ watch(
     }
   }
 );
-
+const submitStep1 = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      loading.value = true;
+      addResourceEquipment(addForm.value)
+        .then(({ data }) => {
+          addForm.value.devId = data;
+          fileForm.value.devId = data;
+          ElMessage({
+            message: "操作成功",
+            duration: 1000,
+            type: "success",
+          });
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+};
+const submitFile = () => {
+  if (fileList.value.length === 0) {
+    ElMessage.error("请选择文件上传");
+    return;
+  }
+  const file = fileList.value[0].raw;
+  const dotIndex: any = file?.name.lastIndexOf(".");
+  if (dotIndex === -1) {
+    ElMessage.error("文件没有后缀，无法上传");
+    return;
+  }
+  loading.value = true;
+  const fileName = fileForm.value.fileName;
+  const fileType = fileForm.value.fileType;
+  fileForm.value.fileName = fileName + "." + file?.name.substring(dotIndex + 1);
+  uploadApi(file, fileName, fileType).then(({ data }) => {
+    fileForm.value.fileUrl = data;
+    privateProfile(fileForm.value)
+      .then(() => {
+        ElMessage({
+          message: "文件添加成功",
+          duration: 1000,
+          type: "success",
+        });
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  });
+};
+const queryCustomer = () => {
+  if (
+    queryForm.value.selectName === undefined ||
+    queryForm.value.selectValue === undefined
+  ) {
+    ElMessage({
+      message: "查询条件不能为空",
+      type: "error",
+      duration: 1000,
+    });
+    return;
+  }
+  loading.value = true;
+  customerPage(queryForm.value)
+    .then(({ data }) => {
+      customData.value = data.list;
+      customTotal.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+const currentCustomerId = ref<number>(0);
+const handleCustomerChange = (val: CustomerVO) => {
+  currentCustomerId.value = val.customId;
+};
+const bindingCustom = () => {
+  if (currentCustomerId.value === 0) {
+    ElMessage({
+      message: "请选择一个客户绑定",
+      duration: 1000,
+      type: "error",
+    });
+    return;
+  }
+  loading.value = true;
+  bindingCustomAPI(addForm.value.devId, currentCustomerId.value)
+    .then(() => {
+      ElMessage({
+        message: "操作成功",
+        duration: 1000,
+        type: "success",
+      });
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
 onMounted(() => {
   loadVendorNameOption();
   loadTypeNameOption();

src/views/resources/equipment/index.vue

@@ -81,7 +81,7 @@
           <el-table-column
             label="设备类型"
             align="center"
-            width="200"
+            width="250"
             show-overflow-tooltip
             v-if="columns[3].show"
           >