feat: 优化项目管理样式

src/theme/fast.scss

@@ -36,6 +36,10 @@
 	}
 }
 
+.el-card.pt-0 .el-card__body {
+	padding-top: 0;
+}
+
 .page-full {
 	height: 100%;
 	display: flex;

src/views/iot/projects/detail/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <el-card shadow="nover">
+    <el-card shadow="nover" class="pt-0">
       <el-tabs :model-value="'1'" size="small">
         <el-tab-pane label="场景概况" name="1">
           <InfoVue></InfoVue>

src/views/iot/projects/list/edit-dialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id ? '编辑项目' : '新增项目'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
+      <el-form-item label="项目名称" prop="name">
+        <el-input v-model.trim="formData.name" placeholder="输入项目名称" />
+      </el-form-item>
+      <el-form-item label="地区" prop="address">
+        <el-cascader :options="data" :props="{ emitPath: true, value: 'code', label: 'name' }" placeholder="请选择" clearable class="w100" v-model="formData.address">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="详细地址" prop="addressDetail">
+        <el-input v-model.trim="formData.addressDetail" placeholder="输入详细地址" />
+      </el-form-item>
+      <el-form-item label="渠道商" prop="channelMerchants">
+        <el-input v-model.trim="formData.channelMerchants" placeholder="输入渠道商" />
+      </el-form-item>
+      <el-form-item label="关键客户" prop="customName">
+        <el-input v-model.trim="formData.customName" placeholder="输入客户名称" />
+      </el-form-item>
+      <el-form-item label="维修公司" prop="repairCompany">
+        <el-input v-model.trim="formData.repairCompany" placeholder="输入维修公司" />
+      </el-form-item>
+      <el-form-item label="维修电话" prop="repairMobile">
+        <el-input v-model.trim="formData.repairMobile" placeholder="输入维修电话" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, nextTick } from 'vue';
+import api from '/@/api/projects';
+import { ruleRequired } from '/@/utils/validator';
+import { ElMessage } from 'element-plus';
+import data from 'province-city-china/dist/level.json'
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const baseForm = {
+  id: undefined,
+  address: null,
+  name: '',
+  addressDetail: '',
+  channelMerchants: '',
+  customName: '',
+  repairCompany: '',
+  repairMobile: '',
+};
+
+const formData = reactive({
+  ...baseForm,
+});
+
+const ruleForm = {
+  name: [ruleRequired('不能为空')],
+  address: [ruleRequired('不能为空')],
+  addressDetail: [ruleRequired('不能为空')],
+  channelMerchants: [ruleRequired('不能为空')],
+  customName: [ruleRequired('不能为空')],
+  repairCompany: [ruleRequired('不能为空')],
+  repairMobile: [ruleRequired('不能为空')],
+};
+
+const onSubmit = async () => {
+  await formRef.value.validate();
+
+  const theApi = formData.id ? api.edit : api.add;
+
+  await theApi(formData);
+
+  ElMessage.success('操作成功');
+  resetForm();
+  showDialog.value = false;
+  emit('getList');
+};
+
+const resetForm = async () => {
+  Object.assign(formData, { ...baseForm });
+  formRef.value && formRef.value.resetFields();
+};
+
+const open = async (row: any) => {
+  resetForm();
+  showDialog.value = true;
+  nextTick(() => {
+    Object.assign(formData, { ...row, address: JSON.parse(row.address) });
+  });
+};
+
+defineExpose({ open });
+</script>

src/views/iot/projects/list/index.vue

@@ -75,7 +75,7 @@ import api from '/@/api/projects';
 import { useSearch } from '/@/hooks/useCommon';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import getOrigin from '/@/utils/origin'
-import EditForm from './edit.vue';
+import EditForm from './edit-dialog.vue';
 import { ref } from 'vue';
 
 const editFormRef = ref();