feat: 增加项目详情中场景概况的项目编辑功能

src/api/projects/index.ts

@@ -2,6 +2,7 @@ import { get, del, post, put } from '/@/utils/request';
 
 export default {
   list: (params: object) => get('/projects/list', params),
+  detail: (code: string) => get('/projects/getByCode', { code }),
   del: (ids: number[]) => del('/projects/del', { ids }),
   add: (data: object) => post('/projects/add', data),
   edit: (data: object) => put('/projects/edit', data),

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

@@ -1,8 +1,9 @@
 <template>
-  <div class="tab-content">
-    <div class="flex-row" style="gap:20px">
+  <div class="tab-content" v-loading="laoding">
+    <div class="flex-row" style="gap:20px;align-items: flex-start;">
       <el-card shadow="nover" class="flex1">
         <template #header>场景概况</template>
+        <EditVue ref="editRef" style="margin-top: 20px;"></EditVue>
       </el-card>
       <el-card shadow="nover" class="flex1">
         <template #header>设备列表</template>
@@ -12,5 +13,18 @@
 </template>
 
 <script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import EditVue from '../list/edit.vue'
+import api from '/@/api/projects';
+import { ref } from 'vue';
+const route = useRoute();
 
+const code = route.params.id as string
+
+const editRef = ref();
+const laoding = ref(false);
+
+api.detail(code).then((res: any) => {
+  editRef.value.open(res)
+}).finally(() => laoding.value = false)
 </script>

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

@@ -1,100 +1,35 @@
 <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 class="api-edit" v-model="showDialog" :title="`${formData?.id ? '编辑项目' : '新增项目'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <EditVue ref="editRef" v-if="showDialog" @getList="getList" @cancle="cancle"></EditVue>
   </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'
+import { ref, nextTick } from 'vue';
+import EditVue from './edit.vue'
 
 const emit = defineEmits(['getList']);
 
 const showDialog = ref(false);
-const formRef = ref();
+const editRef = ref();
+const formData = ref({ id: null });
 
-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();
+function open(row?: any) {
   showDialog.value = true;
+  formData.value = row;
   nextTick(() => {
-    Object.assign(formData, { ...row, address: JSON.parse(row.address) });
+    editRef.value.open(row)
   });
-};
+}
+
+function getList() {
+  emit('getList')
+  showDialog.value = false;
+}
+
+function cancle() {
+  showDialog.value = false;
+}
 
 defineExpose({ open });
 </script>

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

@@ -1,36 +1,32 @@
 <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>
+  <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-item label="" prop="">
+      <el-button @click="cancle">取消</el-button>
+      <el-button type="primary" @click="onSubmit">确定</el-button>
+    </el-form-item>
+  </el-form>
 </template>
 
 <script lang="ts" setup>
@@ -40,7 +36,7 @@ import { ruleRequired } from '/@/utils/validator';
 import { ElMessage } from 'element-plus';
 import data from 'province-city-china/dist/level.json'
 
-const emit = defineEmits(['getList']);
+const emit = defineEmits(['getList', 'cancle']);
 
 const showDialog = ref(false);
 const formRef = ref();
@@ -78,7 +74,7 @@ const onSubmit = async () => {
   await theApi(formData);
 
   ElMessage.success('操作成功');
-  resetForm();
+  // resetForm();
   showDialog.value = false;
   emit('getList');
 };
@@ -88,7 +84,11 @@ const resetForm = async () => {
   formRef.value && formRef.value.resetFields();
 };
 
-const open = async (row: any) => {
+const cancle = () => {
+  emit('cancle');
+};
+
+const open = async (row?: any) => {
   resetForm();
   showDialog.value = true;
   nextTick(() => {

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

@@ -58,7 +58,7 @@
           <template #default="scope">
             <!-- <el-button size="small" text type="info" @click="edit(scope.row)">组态设计</el-button>
             <el-button size="small" text type="info" @click="edit(scope.row)">运行组态</el-button> -->
-            <el-button size="small" text style="margin-left: 0;" type="primary" v-if="!scope.row.folderName" @click="view(scope.row)">详情</el-button>
+            <el-button size="small" text style="margin-left: 0;" type="primary" @click="$router.push('/iotmanager/projects/list/' + scope.row.code)">详情</el-button>
             <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(scope.row)">编辑</el-button>
             <el-button size="small" text type="danger" v-auth="'del'" @click="del(scope.row)">删除</el-button>
           </template>
@@ -90,11 +90,6 @@ function getTokenUrl(url: string) {
   return getOrigin(tokenUrl + url)
 }
 
-const view = (row: any) => {
-  const url = getTokenUrl('#/show/' + row.id);
-  window.open(url);
-};
-
 const addOrEdit = async (row?: any) => {
   // const url = getTokenUrl('#/editor/new');
   // window.open(url);