feat: 增加项目管理列表页的增删改查

src/api/projects/index.ts

@@ -0,0 +1,8 @@
+import { get, del, post } from '/@/utils/request';
+
+export default {
+  list: (params: object) => get('/projects/list', params),
+  del: (ids: number[]) => del('/projects/del', { ids }),
+  add: (data: object) => post('/projects/add', data),
+  edit: (data: object) => post('/projects/edit', data),
+}

src/hooks/useCommon.ts

@@ -50,5 +50,10 @@ export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
     params.total = res.total;
   };
 
-  return { params, tableData, getList, loading }
+  const resetQuery = () => {
+    Object.assign(params, { ...expandParams })
+    getList(1)
+  };
+
+  return { params, tableData, getList, loading, resetQuery }
 }

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

@@ -0,0 +1,98 @@
+<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-input v-model.trim="formData.address" placeholder="输入地区" />
+      </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';
+
+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 });
+  });
+};
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,130 @@
+<template>
+  <div class="page">
+    <el-card shadow="nover">
+      <div class="search">
+        <el-form inline>
+          <el-form-item>
+            <el-input v-model="params.channelMerchants" style="width: 200px;" placeholder="渠道商搜索" @keyup.enter.native="getList(1)" clearable>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="params.status" placeholder="请选择转发格式" style="width: 100px">
+              <el-option label="全部状态" :value="-1"> </el-option>
+              <el-option label="正常" :value="1"> </el-option>
+              <el-option label="禁用" :value="0"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="getList(1)">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button @click="resetQuery()">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" v-auth="'xxx'" @click="addOrEdit()">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增
+            </el-button>
+            <el-button type="danger" v-auth="'xxx'" :disabled="!ids.length" @click="addOrEdit()">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" v-loading="loading">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="status" label="项目状态" width="100" :formatter="(row: any) => row.status ? '正常' : '禁用'" align="center"></el-table-column>
+        <el-table-column prop="name" label="项目名称" min-width="120" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="address" label="省/市/区/县" min-width="100" align="center"></el-table-column>
+        <el-table-column prop="addressDetail" label="详细地址" min-width="100" align="center"></el-table-column>
+        <el-table-column prop="channelMerchants" label="渠道商" min-width="100" align="center"></el-table-column>
+        <el-table-column prop="customName" label="关键客户" min-width="100" align="center"></el-table-column>
+        <el-table-column prop="repairCompany" label="维修公司" min-width="100" align="center"></el-table-column>
+        <el-table-column prop="updatedAt" label="更新时间" width="165" align="center"></el-table-column>
+        <el-table-column label="操作" width="140" align="center">
+          <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 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>
+        </el-table-column>
+      </el-table>
+      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+      <EditForm ref="editFormRef" @getList="getList(1)"></EditForm>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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 { ref } from 'vue';
+
+const editFormRef = ref();
+const ids = ref<number[]>([]);
+
+const { params, tableData, getList, loading, resetQuery } = useSearch<any[]>(api.list, 'Data', { channelMerchants: '' });
+
+getList();
+
+function getTokenUrl(url: string) {
+  const tokenUrl = import.meta.env.VITE_TOPO_URL
+  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);
+  if (row) {
+    editFormRef.value.open(row);
+    return;
+  } else {
+    editFormRef.value.open();
+  }
+};
+
+// 多选框选中数据
+const handleSelectionChange = (selections: any[]) => {
+  ids.value = selections.map((item) => item.id);
+};
+
+const edit = (row: any) => {
+  const url = getTokenUrl('#/editor/' + row.id);
+  window.open(url);
+};
+
+const del = (row?: any) => {
+  ElMessageBox.confirm(row ? `此操作将项目：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个项目`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await api.del(row ? [row.id] : ids.value);
+    ElMessage.success('删除成功');
+    getList(1);
+  });
+};
+</script>