进程数据库

src/views/simulationScene/database/jcsjk.vue

@@ -1,86 +1,33 @@
 <template>
   <page-header-wrapper>
     <Grid :columns="['400px', 1]">
-      <a-card :bordered="false">
+      <a-card title="想定列表" class="my-card my-card-has-title" :bordered="false" v-loading="xd.loading">
-        <a-list :loading="listLoading" item-layout="horizontal" :data-source="scenarioList">
+        <template #extra>
-          <a-list-item slot="renderItem" slot-scope="item" @click="handleClickScenario(item)">
+          <a-icon type="sync" style="font-size: 30px" @click="getXdListData()" />
-            <a-list-item-meta :description="item.author">
+        </template>
-              <span slot="title">{{ item.name }}</span>
+        <a-tree
-              <a-checkbox slot="avatar" :checked="item.id === queryParam.id"></a-checkbox>
+          :treeData="xd.listData"
-            </a-list-item-meta>
+          :replaceFields="{ title: 'name', key: 'id' }"
-          </a-list-item>
+          :selectedKeys.sync="xd.selectedKeys"
-        </a-list>
+          @select="handleChangeXdSelected"
+        >
+        </a-tree>
       </a-card>
-      <a-card :bordered="false">
+      <a-card title="进程列表" class="my-card my-card-has-title" :bordered="false">
-        <div class="table-page-search-wrapper">
+        <template #extra>
-          <a-form layout="inline">
+          <a-icon type="sync" style="font-size: 30px" @click="() => {}" />
-            <a-row :gutter="48">
+        </template>
-              <!-- <a-col :xl="8" :lg="8">
+        <AntQueryTable
-                <a-form-item label="想定名称">
+          ref="jc-table"
-                  <a-input placeholder="请输入" v-model="queryParam.name" />
+          height="100%"
-                </a-form-item>
+          :queryConfig="jc.queryConfig"
-              </a-col> -->
+          :tableConfig="jc.tableConfig"
-              <a-col :xl="8" :lg="8">
+          :pageConfig="jc.pageConfig"
-                <span class="table-page-search-submitButtons">
+          :showTool="jc.showTool"
-                  <a-button type="primary" @click="getList">查询</a-button>
-                  <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
-                </span>
-              </a-col>
-              <a-col :xl="8" :lg="8">
-                <!-- <a-button type="primary" icon="plus" style="float: right" @click="handleAdd">新建</a-button> -->
-              </a-col>
-            </a-row>
-          </a-form>
-        </div>
-        <a-table
-          bordered
-          rowKey="id"
-          size="small"
-          :columns="columns"
-          :dataSource="loadData"
-          :pagination="false"
-          :loading="loadingTable"
         >
-          <!-- <span slot="action" slot-scope="text, record">
+        </AntQueryTable>
-            <a @click="handleEdit(record)"> <a-icon type="form" /></a>
-            <a-divider type="vertical" />
-
-            <a-popconfirm
-              title="确定要删除该想定吗？"
-              ok-text="确定"
-              cancel-text="取消"
-              @confirm="handleDelete(record)"
-            >
-              <a href="javascript:;"><a-icon type="delete" /></a>
-            </a-popconfirm>
-          </span> -->
-        </a-table>
       </a-card>
     </Grid>
-    <h-modal
-      :title="AEModal.title"
-      :width="640"
-      :visible="AEModal.visible"
-      :destroyOnClose="true"
-      @cancel="() => this.handleClose()"
-      @ok="() => this.handleOk()"
-      switch-fullscreen
-      :fullscreen.sync="AEModal.fullscreen"
-    >
-      <a-spin :spinning="AEModal.spinning">
-        <a-form-model
-          ref="form"
-          :model="AEModal.form"
-          :rules="AEModal.rules"
-          :label-col="AEModal.labelCol"
-          :wrapper-col="AEModal.wrapperCol"
-        >
-          <a-form-model-item label="想定名称" prop="name">
-            <a-input v-model="AEModal.form.name" />
-          </a-form-model-item>
-        </a-form-model>
-      </a-spin>
-    </h-modal>
   </page-header-wrapper>
 </template>
 
@@ -89,148 +36,60 @@ export default {
   name: 'Jcsjk',
   data() {
     return {
-      listLoading: false,
+      xd: {
-      scenarioList: [],
+        loading: false,
-
+        listData: [],
-      queryParam: { id: '' },
+        selectedKeys: [],
+      },
+      jc: {
+        queryConfig: false,
+        tableConfig: {
+          table: {},
+          immediate: false,
+          query: () =>
+            this.$http({
+              url: '/baseData/scenario/taskList',
+              method: 'get',
+              params: { id: this.xd.selectedKeys[0] },
+            }).then((res) => ({
+              data: res.data.map(([a, b, c], index) => ({ id: index, 0: a, 1: b, 2: c })),
+            })),
           columns: [
-        {
+            { dataIndex: 'serial' },
-          title: '#',
+            { title: '任务进程名称', dataIndex: '0', width: 'auto', minWidth: 150 },
-          dataIndex: 'index',
+            { title: '开始时间', dataIndex: '1', width: 'auto', minWidth: 150 },
-          customRender: (_, record, $index) => $index + 1,
+            { title: '失效时间', dataIndex: '2', width: 'auto', minWidth: 150 },
-          align: 'center',
-          width: 80,
-        },
-        {
-          title: '任务进程名称',
-          dataIndex: '0',
-          align: 'left',
-        },
-        {
-          title: '开始时间',
-          width: 160,
-          dataIndex: '1',
-          align: 'center',
-        },
-        {
-          title: '失效时间',
-          width: 160,
-          dataIndex: '2',
-          align: 'center',
-        },
           ],
-      loadData: [], // 加载数据方法 必须为 Promise 对象
-      loadingTable: false,
-
-      AEModal: {
-        title: '',
-        visible: false,
-        editStatus: false,
-        fullscreen: false,
-        spinning: false,
-        form: {},
-        rules: {
-          name: [{ required: true, message: '请输入想定名称！', trigger: 'blur' }],
         },
-        labelCol: { xs: { span: 24 }, sm: { span: 7 } },
+        pageConfig: false,
-        wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
+        showTool: false,
       },
     }
   },
   created() {
-    this.getScenarioList()
+    this.getXdListData()
   },
   methods: {
-    async getScenarioList() {
+    async getXdListData() {
       try {
-        this.listLoading = true
+        this.xd.loading = true
         const res = await this.$http({
           url: `/baseData/scenario/all`,
           method: 'get',
         })
-        this.scenarioList = res.data
+        this.xd.listData = res.data
-        this.queryParam.id = this.scenarioList[0].id
+        if (this.xd.selectedKeys.length === 0) {
-        this.getList()
+          this.xd.selectedKeys = [this.xd.listData[0].id]
+          this.handleChangeXdSelected()
+        }
       } catch (error) {
         console.log(error)
       } finally {
-        this.listLoading = false
+        this.xd.loading = false
       }
     },
-    handleClickScenario(item) {
+    handleChangeXdSelected() {
-      this.queryParam.id = item.id
+      this.$refs['jc-table'].commitAction('query')
-      this.getList()
-    },
-    resetList() {
-      this.getList()
-    },
-    async getList(parameter = {}) {
-      try {
-        this.loadingTable = true
-        const res = await this.$http({
-          url: '/baseData/scenario/taskList',
-          method: 'get',
-          params: { ...parameter, ...this.queryParam },
-        })
-        this.loadData = res.data
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.loadingTable = false
-      }
-    },
-    handleAdd() {
-      this.AEModal.title = '添加想定'
-      this.AEModal.editStatus = false
-      this.AEModal.visible = true
-    },
-    async handleEdit(record) {
-      try {
-        const res = await this.$http({
-          url: `/baseData/scenario/${record.id}`,
-          method: 'get',
-        })
-        this.AEModal.form = res.data.data
-        this.AEModal.title = '编辑想定'
-        this.AEModal.editStatus = true
-        this.AEModal.visible = true
-      } catch (error) {
-        console.log(error)
-        this.$message.error('未知错误，请重试')
-      }
-    },
-    handleClose() {
-      this.AEModal.visible = false
-      this.AEModal.form = {}
-    },
-    async handleOk() {
-      try {
-        await this.$refs.form.validate()
-        const params = { ...this.AEModal.form }
-        await this.$http({
-          url: `/baseData/scenario/save`,
-          method: 'post',
-          data: params,
-        })
-        this.$message.success(this.AEModal.editStatus ? '编辑想定成功!' : '添加想定成功!')
-        this.getList()
-        this.handleClose()
-      } catch (error) {
-        console.log(error)
-      }
-    },
-    async handleDelete(record) {
-      try {
-        await this.$http({
-          url: `/baseData/scenario/remove/${record.id}`,
-          method: 'get',
-        })
-        this.$message.success('删除角色成功')
-        this.getList()
-      } catch (error) {
-        console.log(error)
-        this.$message.error('删除角色失败')
-      }
     },
   },
 }