feat: 增加项目管理中的过滤模板页面

src/api/projects/index.ts

@@ -10,4 +10,24 @@ export default {
   add: (data: object) => post('/projects/add', data),
   edit: (data: object) => put('/projects/edit', data),
   editStatus: (data: object) => put('/projects/editStatus', data),
+  template: {
+    list: (params: object) => get('/projects/devDeviceAttributeTemplates/list', params),
+    add: (data: object) => post('/projects/devDeviceAttributeTemplates/add', data),
+    bindDevices: (data: object) => post('/projects/devDeviceAttributeTemplates/bindDevices', data),
+    edit: (data: object) => put('/projects/devDeviceAttributeTemplates/edit', data),
+    del: (ids: number[]) => del('/projects/devDeviceAttributeTemplates/del', { ids }),
+    editStatus: (data: object) => put('/projects/devDeviceAttributeTemplates/editStatus', data),
+    detail: (id: string) => get('/projects/devDeviceAttributeTemplates/getById', { id }),
+    getBindDevices: (params: object) => get('/projects/devDeviceAttributeTemplates/getBindDevices', params),
+    unBindDevices: (data: object) => post('/projects/devDeviceAttributeTemplates/unBindDevices', data),
+    attr: {
+      list: (params: object) => get('/projects/devDeviceAttributeValues/list', params),
+      add: (data: object) => post('/projects/devDeviceAttributeValues/add', data),
+      edit: (data: object) => put('/projects/devDeviceAttributeValues/edit', data),
+      del: (ids: number[]) => del('/projects/devDeviceAttributeValues/del', { ids }),
+      editStatus: (data: object) => put('/projects/devDeviceAttributeValues/editStatus', data),
+      editIsVisible: (data: object) => put('/projects/devDeviceAttributeValues/editIsVisible', data),
+      detail: (id: string) => get('/projects/devDeviceAttributeValues/getById', { id }),
+    }
+  }
 }

src/views/iot/projects/filter/attrEdit.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData?.id ? '编辑属性' : '新增属性'}`" width="500px" :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="属性KEY" prop="key">
+        <el-input v-model.trim="formData.key" placeholder="输入属性名称" />
+      </el-form-item>
+      <el-form-item label="单位" prop="unit">
+        <el-input v-model.trim="formData.unit" 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>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import api from '/@/api/projects';
+import { ref, reactive } from 'vue';
+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,
+  name: '',
+  key: '',
+  unit: '',
+  templateseCode: '',
+};
+
+const formData = reactive({
+  ...baseForm,
+});
+
+const ruleForm = {
+  name: [ruleRequired('不能为空')],
+  key: [ruleRequired('不能为空')],
+  unit: [ruleRequired('不能为空')],
+};
+
+const onSubmit = async () => {
+  await formRef.value.validate();
+
+  const theApi = formData.id ? api.template.attr.edit : api.template.attr.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 (code: string, row?: any) => {
+  resetForm();
+  showDialog.value = true;
+  formData.templateseCode = code
+
+  if (row) {
+    formData.id = row.id
+    formData.name = row.name
+    formData.key = row.key
+    formData.unit = row.unit
+  }
+};
+
+function cancle() {
+  showDialog.value = false;
+}
+
+defineExpose({ open });
+</script>

src/views/iot/projects/filter/bindDevice.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-dialog title="绑定设备" v-model="isShowDialog" width="1200">
+    <el-divider content-position="left" style="margin-top: 0;">设备数据过滤器模板信息</el-divider>
+    <el-descriptions :column="3" border>
+      <el-descriptions-item label="模板名称">{{ data.name }}</el-descriptions-item>
+      <el-descriptions-item label="模板编码">{{ data.code }}</el-descriptions-item>
+      <el-descriptions-item label="更新时间">{{ data.updatedAt }}</el-descriptions-item>
+    </el-descriptions>
+    <el-divider content-position="left" style="margin-top: 30px;">绑定设备</el-divider>
+    <div class="flex-row"><span></span> <el-button type="primary" size="small" @click="addOrEdit(data.code)">绑定设备</el-button></div>
+    <el-table :data="tableData" style="width: 100%;margin-top: 20px;" max-height="50vh" v-loading="loading">
+      <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="key" label="设备编码" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="productName" label="所属产品" align="center"></el-table-column>
+      <el-table-column label="操作" width="120" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button size="small" text type="danger" @click="del(row.key)">解绑</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()" /> -->
+    <bindDeviceForm ref="editFormRef" :hasBindKeys="hasBindKeys" @get-list="getList(1)"></bindDeviceForm>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import api from '/@/api/projects';
+import bindDeviceForm from './bindDeviceForm.vue';
+import { useSearch } from '/@/hooks/useCommon';
+import { ElMessageBox, ElMessage } from 'element-plus';
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.template.getBindDevices, '', { code: '' });
+
+const isShowDialog = ref(false);
+const editFormRef = ref();
+const data = ref<any>({});
+
+const hasBindKeys = computed(() => {
+  return tableData.value.map(item => item.key);
+});
+
+function show(row: any) {
+  data.value = { ...row }
+  isShowDialog.value = true
+  params.code = row.code
+  getList();
+}
+
+const addOrEdit = (code: string, row?: any) => {
+  editFormRef.value.open(code, row);
+};
+
+const handleStatusChange = (row: any) => {
+  let text = row.isVisible === 1 ? '设置可见' : '设置不可见';
+  ElMessageBox.confirm('确认要' + text + '属性：【' + row.name + '】吗?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(function () {
+      return api.template.attr.editIsVisible({ id: row.id, isVisible: row.isVisible });
+    })
+    .then(() => {
+      ElMessage.success(text + '成功');
+    })
+    .catch(function () {
+      row.isVisible = row.isVisible === 0 ? 1 : 0;
+    });
+};
+
+const del = async (code: string) => {
+  await api.template.unBindDevices({ code: params.code, deviceKeys: [code] });
+  ElMessage.success('删除成功');
+  getList(1);
+};
+
+defineExpose({ show })
+</script>
+<style scoped lang="scss">
+::v-deep .dialog-content-wrapper {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+</style>

src/views/iot/projects/filter/bindDeviceForm.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog class="api-edit" v-model="showDialog" title="绑定设备" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-table :data="tableData" v-if="showDialog" style="width: 100%" row-key="key" @selection-change="handleSelectionChange" v-loading="loading">
+      <el-table-column type="selection" reserve-selection :selectable="(row: any) => !hasBindKeys.includes(row.key)" width="55" align="center" />
+      <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="key" label="设备编码" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="productName" label="所属产品" align="center"></el-table-column>
+    </el-table>
+    <div class="flex-row">
+      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+    </div>
+    <div style="float: right">
+      <el-button @click="cancle">取消</el-button>
+      <el-button type="primary" @click="onSubmit">绑定设备</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import api from '/@/api/projects';
+import deviceApi from '/@/api/device';
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useSearch } from '/@/hooks/useCommon';
+
+const emit = defineEmits(['getList']);
+
+defineProps({
+  hasBindKeys: {
+    type: Array,
+    default: () => []
+  },
+});
+
+const showDialog = ref(false);
+const code = ref('');
+const keys = ref<any[]>([]);
+
+const { params, tableData, getList, loading } = useSearch<any[]>(deviceApi.instance.getList, 'device', { keyWord: '', status: undefined, pageSize: 10 });
+
+// 多选框选中数据
+const handleSelectionChange = (selections: any[]) => {
+  keys.value = selections.map((item) => item.key);
+};
+
+const onSubmit = async () => {
+
+  await api.template.bindDevices({ code: code.value, deviceKeys: keys.value });
+
+  ElMessage.success('操作成功');
+  // resetForm();
+  showDialog.value = false;
+  emit('getList');
+};
+
+const open = async (templateseCode: string) => {
+  tableData.value = []
+  code.value = templateseCode;
+  showDialog.value = true;
+  getList();
+};
+
+function cancle() {
+  showDialog.value = false;
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+  <el-dialog title="模板详情" v-model="isShowDialog" width="1200">
+    <el-divider content-position="left" style="margin-top: 0;">设备数据过滤器模板信息</el-divider>
+    <el-descriptions :column="3" border>
+      <el-descriptions-item label="模板名称">{{ data.name }}</el-descriptions-item>
+      <el-descriptions-item label="模板编码">{{ data.code }}</el-descriptions-item>
+      <el-descriptions-item label="更新时间">{{ data.updatedAt }}</el-descriptions-item>
+    </el-descriptions>
+    <el-divider content-position="left" style="margin-top: 30px;">自定义属性</el-divider>
+    <div class="flex-row"><span></span> <el-button type="primary" size="small" @click="addOrEdit(data.code)">添加自定义属性</el-button></div>
+    <el-table :data="tableData" style="width: 100%;margin-top: 20px;" v-loading="loading">
+      <el-table-column prop="name" label="属性名称" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="key" label="属性编码" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="unit" label="单位" align="center" show-overflow-tooltip></el-table-column>
+      <el-table-column prop="updatedAt" label="更新时间" align="center"></el-table-column>
+      <el-table-column prop="isVisible" label="是否可见" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.isVisible" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button size="small" text type="warning" @click="addOrEdit(data.code, row)">编辑</el-button>
+          <el-button size="small" text type="danger" @click="del(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()" />
+    <attrEdit ref="editFormRef" @get-list="getList(1)"></attrEdit>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import api from '/@/api/projects';
+import attrEdit from './attrEdit.vue';
+import { useSearch } from '/@/hooks/useCommon';
+import { ElMessageBox, ElMessage } from 'element-plus';
+
+const { params, tableData, getList, loading } = useSearch<any[]>(api.template.attr.list, 'Data', { keyWord: '', templateseCode: '' });
+
+const isShowDialog = ref(false);
+const editFormRef = ref();
+const ids = ref([]);
+const data = ref<any>({});
+
+function show(row: any) {
+  data.value = { ...row }
+  isShowDialog.value = true
+  params.templateseCode = row.code
+  getList();
+}
+
+const addOrEdit = (code: string, row?: any) => {
+  editFormRef.value.open(code, row);
+};
+
+const handleStatusChange = (row: any) => {
+  let text = row.isVisible === 1 ? '设置可见' : '设置不可见';
+  ElMessageBox.confirm('确认要' + text + '属性：【' + row.name + '】吗?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(function () {
+      return api.template.attr.editIsVisible({ id: row.id, isVisible: row.isVisible });
+    })
+    .then(() => {
+      ElMessage.success(text + '成功');
+    })
+    .catch(function () {
+      row.isVisible = row.isVisible === 0 ? 1 : 0;
+    });
+};
+
+const del = (row?: any) => {
+  ElMessageBox.confirm(row ? `此操作将属性：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个属性`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await api.template.attr.del(row ? [row.id] : ids.value);
+    ElMessage.success('删除成功');
+    getList(1);
+  });
+};
+
+defineExpose({ show })
+</script>
+<style scoped lang="scss">
+::v-deep .dialog-content-wrapper {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData?.id ? '编辑模板' : '新增模板'}`" width="500px" :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, nextTick } from 'vue';
+import EditVue from './edit.vue'
+
+const emit = defineEmits(['getList']);
+
+const showDialog = ref(false);
+const editRef = ref();
+const formData = ref({ id: null });
+
+function open(row?: any) {
+  showDialog.value = true;
+  formData.value = row;
+  nextTick(() => {
+    editRef.value.open(row)
+  });
+}
+
+function getList() {
+  emit('getList')
+  showDialog.value = false;
+}
+
+function cancle() {
+  showDialog.value = false;
+}
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <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="">
+      <el-button @click="cancle">取消</el-button>
+      <el-button type="primary" @click="onSubmit">确定</el-button>
+    </el-form-item>
+  </el-form>
+</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', 'cancle']);
+
+const showDialog = ref(false);
+const formRef = ref();
+
+const baseForm = {
+  id: undefined,
+  name: '',
+};
+
+const formData = reactive({
+  ...baseForm,
+});
+
+const ruleForm = {
+  name: [ruleRequired('不能为空')],
+};
+
+const onSubmit = async () => {
+  await formRef.value.validate();
+
+  const theApi = formData.id ? api.template.edit : api.template.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 cancle = () => {
+  emit('cancle');
+};
+
+const open = async (row?: any) => {
+  resetForm();
+  showDialog.value = true;
+  if (row) {
+    console.log(row)
+    Object.assign(formData, { ...row });
+  }
+};
+
+defineExpose({ open });
+</script>

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="page">
+    <el-card shadow="nover">
+      <div class="search">
+        <el-form inline>
+          <el-form-item>
+            <el-input v-model="params.keyWord" style="width: 200px;" placeholder="模板名称搜索" @keyup.enter.native="getList(1)" clearable>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-input v-model="params.deviceKey" style="width: 200px;" placeholder="设备key搜索" @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="'add'" @click="addOrEdit()">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增
+            </el-button>
+            <el-button type="danger" v-auth="'del'" :disabled="!ids.length" @click="del()">
+              <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" v-col="'selection'" width="55" align="center" />
+        <el-table-column prop="name" v-col="'name'" label="模板名称" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="code" v-col="'code'" label="模板编码" align="center" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="updatedAt" v-col="'updatedAt'" label="更新时间" align="center"></el-table-column>
+        <el-table-column prop="status" v-col="'status'" label="状态" align="center">
+          <template #default="scope">
+            <el-switch v-model="scope.row.status" inline-prompt :active-value="1" :inactive-value="0" active-text="启" inactive-text="禁" @change="handleStatusChange(scope.row)">
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" align="center" fixed="right" v-col="'handle'">
+          <template #default="{ row }">
+            <el-button size="small" text type="primary" v-auth="'detail'" @click="$refs.detailRef?.show(row)">详情</el-button>
+            <el-button size="small" text type="warning" v-auth="'edit'" @click="addOrEdit(row)">编辑</el-button>
+            <el-button size="small" text type="danger" v-auth="'del'" @click="del(row)">删除</el-button>
+            <el-button size="small" text type="primary" v-auth="'viewbind'" @click="$refs.bindDeviceRef?.show(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>
+      <detailVue ref="detailRef"></detailVue>
+      <bindDevice ref="bindDeviceRef"></bindDevice>
+    </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 EditForm from './edit-dialog.vue';
+import detailVue from './detail.vue';
+import bindDevice from './bindDevice.vue';
+import { ref } from 'vue';
+
+const editFormRef = ref();
+const bindDeviceRef = ref();
+const detailRef = ref();
+const ids = ref<number[]>([]);
+
+const { params, tableData, getList, loading, resetQuery } = useSearch<any[]>(api.template.list, 'Data', { keyWord: '', deviceKey: '' });
+
+getList();
+
+const addOrEdit = (row?: any) => {
+  if (row) {
+    editFormRef.value.open(row);
+    return;
+  } else {
+    editFormRef.value.open();
+  }
+};
+
+// 多选框选中数据
+const handleSelectionChange = (selections: any[]) => {
+  ids.value = selections.map((item) => item.id);
+};
+
+const del = (row?: any) => {
+  ElMessageBox.confirm(row ? `此操作将模板：“${row.name}”，是否继续?` : `此操作将${ids.value.length}个模板`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    await api.template.del(row ? [row.id] : ids.value);
+    ElMessage.success('删除成功');
+    getList(1);
+  });
+};
+
+const handleStatusChange = (row: any) => {
+  let text = row.status === 1 ? '启用' : '停用';
+  ElMessageBox.confirm('确认要' + text + '模板：【' + row.name + '】吗?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(function () {
+      return api.template.editStatus({ id: row.id, status: row.status });
+    })
+    .then(() => {
+      ElMessage.success(text + '成功');
+    })
+    .catch(function () {
+      row.status = row.status === 0 ? 1 : 0;
+    });
+};
+</script>