修改env

.env.dev

@@ -2,6 +2,6 @@
 
 FT_NODE_ENV=dev
 
-FT_WS_URL=ws://192.168.1.199:9527
-FT_PROXY=http://192.168.1.199:8080
+FT_WS_URL=ws://192.168.1.200:8080/ws
+FT_PROXY=http://192.168.1.200:8080
 FT_API_BASE=/api

src/apis/ore.ts

@@ -0,0 +1,9 @@
+import http from 'libs/http'
+
+export const getOreList = (): Promise<any> => http.get(`/ores/list`)
+
+export const saveOre = (params: { name: string }): Promise<any> => http.post(`/ores`, params)
+
+export const editOre = (params: { id: number, name: string }): Promise<any> => http.put(`/ores`, params)
+
+export const delOre = (ids: string): Promise<any> => http.delete(`/ores/${ids}`)

src/components/craft/AddCraftDialog.vue

@@ -2,6 +2,7 @@
 import { createCraft, updateCraft } from '@/apis/crafts'
 import { ElMessage } from 'element-plus'
 import { ref } from 'vue'
+import { useRoute } from 'vue-router'
 import { StepCmdDescMap } from '../../views/craft/craft_constant'
 import FtButton from '../common/FTButton/index.vue'
 import FTDialog from '../common/FTDialog/index.vue'
@@ -18,7 +19,8 @@ const craftObj = ref<CraftTypes.Craft>({})
 const loading = ref(false)
 const saveRef = ref<CraftTypes.SaveRef | null>(null)
 const tempStepStructs = ref<CraftTypes.StepStruct[]>([])
-const oresId = 1
+const route = useRoute()
+const oresId: number = route.query.oreId as unknown as number
 const stepCmds: CraftTypes.StepCmd[] = [
   // 'upTray',
   // 'downTray',

src/layouts/default.vue

@@ -68,10 +68,10 @@ const logoutHandle = () => {
           v-for="item in authRoutes"
           :key="item.path"
           class="aside-item"
-          :class="{ 'aside-item-active': router.currentRoute.value.path === item.path }"
+          :class="{ 'aside-item-active': router.currentRoute.value.path.includes(item.path) }"
           @click="router.push(item.path)"
         >
-          <img class="swing-icon" :src="router.currentRoute.value.path === item.path ? item.meta!.activeIcon : item.meta!.icon" alt="">
+          <img class="swing-icon" :src="router.currentRoute.value.path.includes(item.path) ? item.meta!.activeIcon : item.meta!.icon" alt="">
           <span class="text">{{ item.meta!.title }}</span>
         </div>
       </el-aside>

src/router/index.ts

@@ -9,6 +9,7 @@ const router = createRouter({
 })
 
 router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+  console.log('routes-------', routes)
   if (getToken()) {
     next()
   }

src/router/routes.ts

@@ -78,13 +78,18 @@ const authRoutes: RouteRecordRaw[] = [
   {
     path: '/ore',
     name: 'ore',
-    component: () => import('views/craft/index.vue'),
+    component: () => import('views/ore/index.vue'),
     meta: {
       isDefault: true,
-      title: '工艺管理',
+      title: '矿石管理',
       icon: n_ore,
       activeIcon: s_ore,
     },
+    children: [{
+      path: 'craft',
+      name: 'Craft',
+      component: () => import('views/craft/index.vue'),
+    }],
   },
   {
     path: '/user',

src/types/ore.d.ts

@@ -0,0 +1,23 @@
+declare namespace Ore {
+  interface OreItem {
+    id: number
+    oresName: string
+    createTime: string
+    updateTime: string
+    craftsList: CraftTypes.Craft[]
+  }
+
+  interface AddItem {
+    name: string
+  }
+
+  interface EditItem {
+    id?: number
+    name: string
+  }
+
+  interface OreTableList {
+    list: OreItem[]
+    total: number
+  }
+}

src/views/craft/index.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { delCraft, getCraftList, setCraft, startCraft } from '@/apis/crafts'
 import AddCraftDialog from '@/components/craft/AddCraftDialog.vue'
-import FtButton from '@/components/common/FTButton/index.vue'
+import CraftStatus from '@/components/craft/CraftStatus.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { onMounted, ref } from 'vue'
-import CraftStatus from '@/components/craft/CraftStatus.vue'
+import { useRoute, useRouter } from 'vue-router'
 
 const tableData = ref([])
 const addCraftRef = ref<CraftTypes.AddCraftType | null>(null)
@@ -13,14 +13,16 @@ const multipleSelection = ref<CraftTypes.Craft[]>()
 const heatVisible = ref(false)
 const heatId = ref()
 const craftStatusRef = ref<CraftTypes.craftStatus | null>(null)
-
+const route = useRoute()
+const router = useRouter()
+const oresId = route.query.oreId
 onMounted(() => {
   queryCrafList()
 })
 
 const queryCrafList = () => {
   const params = {
-    oresId: 1,
+    oresId,
   }
   getCraftList(params).then((res) => {
     tableData.value = res
@@ -114,6 +116,10 @@ const onStart = () => {
     }
   }
 }
+
+const returnOre = () => {
+  router.push('/ore')
+}
 </script>
 
 <template>
@@ -139,14 +145,14 @@ const onStart = () => {
       <el-table :data="tableData" style="width: 100%" size="small" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" :selectable="selectable" />
         <el-table-column prop="name" label="工艺名称" />
-        <el-table-column prop="orgName" label="矿石名称">
+        <!-- <el-table-column prop="orgName" label="矿石名称">
           <template #default="scope">
-            <!-- 测试数据 -->
             <span v-if="scope.row.oresId === 1">硫酸</span>
             <span v-else>硝酸</span>
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column prop="createTime" label="创建日期" />
+        <el-table-column prop="updateTime" label="更新日期" />
       </el-table>
     </main>
     <AddCraftDialog ref="addCraftRef" @ok="queryCrafList" />
@@ -165,6 +171,9 @@ const onStart = () => {
       </div>
     </el-dialog>
     <CraftStatus ref="craftStatusRef" />
+    <div class="return-ore">
+      <FtButton @click="returnOre">返回</FtButton>
+    </div>
   </div>
 </template>
 
@@ -172,4 +181,11 @@ const onStart = () => {
   .craft-main{
     margin-top: 20px;
   }
+  .return-ore{
+    position: absolute;
+    bottom: 20px;
+    display: flex;
+    justify-content: center;
+    width: 80vw;
+  }
 </style>

src/views/ore/index.vue

@@ -0,0 +1,202 @@
+<script lang="ts" setup>
+import { delOre, editOre, getOreList, saveOre } from '@/apis/ore'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+onMounted(() => {
+  queryOresList()
+})
+const tableData = ref<Ore.OreItem[]>([])
+const visible = ref(false)
+const oreForm = ref()
+const name = ref()
+const loading = ref(false)
+const selectedList = ref<Ore.OreItem[]>([])
+const showCraftCommponent = ref(false)
+const router = useRouter()
+const route = useRoute()
+const queryOresList = () => {
+  getOreList().then((res) => {
+    if (res && res.list) {
+      tableData.value = res.list
+    }
+  })
+}
+
+watch(() => route.path, (newVal) => {
+  if (newVal === '/ore') {
+    queryOresList()
+  }
+})
+const onSelectionChange = (rows: Ore.OreItem[]) => {
+  selectedList.value = rows
+}
+
+const onAddOre = () => {
+  visible.value = true
+}
+
+const onEditOre = () => {
+  if (!selectedList.value.length) {
+    ElMessage.warning('请选择要编辑的数据')
+    return
+  }
+  if (selectedList.value.length !== 1) {
+    ElMessage.warning('只能编辑一条数据')
+    return
+  }
+  const editItem = selectedList.value[0]
+  oreForm.value = { ...editItem }
+  name.value = editItem.oresName
+  visible.value = true
+}
+
+const onDelOre = () => {
+  if (!selectedList.value.length) {
+    ElMessage.warning('请选择要编辑的数据')
+    return
+  }
+  ElMessageBox.confirm(
+    '确认删除选中的数据吗？',
+    '确认提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    const ids = selectedList.value.map(item => item.id)
+    delOre(ids.join(',')).then(() => {
+      ElMessage.success('删除成功')
+      queryOresList()
+    })
+  })
+}
+
+const closeDialog = () => {
+  visible.value = false
+}
+
+const onConfirm = () => {
+  if (!name.value) {
+    ElMessage.warning('请输入矿石名称')
+    return
+  }
+  loading.value = true
+  const params = {
+    ...oreForm.value,
+  }
+  let apiFn = null
+  if (oreForm.value.id) {
+    params.id = oreForm.value.id
+    apiFn = editOre
+  }
+  else {
+    apiFn = saveOre
+  }
+  params.oresName = name.value
+  params.name = name.value
+  apiFn(params).then(() => {
+    loading.value = false
+    visible.value = false
+    name.value = ''
+    oreForm.value = {}
+    queryOresList()
+  }).catch((e) => {
+    console.error('操作失败==', e)
+    loading.value = true
+  })
+}
+
+const onShowCraft = () => {
+  if (!selectedList.value.length) {
+    ElMessage.warning('请选择要查看的数据')
+    return
+  }
+  if (selectedList.value.length !== 1) {
+    ElMessage.warning('只能查看一条数据的工艺')
+    return
+  }
+  const editItem = selectedList.value[0]
+  showCraftCommponent.value = true
+  router.push({
+    path: '/ore/craft',
+    query: { oreId: editItem.id },
+  })
+}
+</script>
+
+<template>
+  <div v-if="route.path === '/ore/craft'">
+    <router-view />
+  </div>
+  <div v-else>
+    <div>
+      <FtButton @click="onAddOre">
+        添加矿石
+      </FtButton>
+      <FtButton @click="onEditOre">
+        编辑矿石
+      </FtButton>
+      <FtButton @click="onDelOre">
+        删除矿石
+      </FtButton>
+      <FtButton @click="onShowCraft">
+        查看工艺
+      </FtButton>
+    </div>
+    <div>
+      <el-table :data="tableData" stripe style="width: 100%" @selection-change="onSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column type="index" width="50" />
+        <el-table-column prop="oresName" label="矿石名称" />
+        <el-table-column prop="craftNames" label="工艺名称">
+          <template #default="scoped">
+            <div class="craft-tag">
+              <el-tag v-for="item in scoped.row.craftsList" :key="item.id" type="info" style="margin-left: 5px;">
+                {{ item.name }}
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" />
+        <el-table-column prop="updateTime" label="更新时间" />
+      </el-table>
+      <!-- <FtTable :columns="columns" has-header :btn-list="btnList" :get-data-fn="queryOresList" /> -->
+    </div>
+    <FtDialog v-model="visible" title="添加矿石" style="width:35vw; height:30vh">
+      <div class="add-content">
+        <label>矿石名称：</label>
+        <span><el-input v-model="name" style="width:200px" /></span>
+      </div>
+      <template #footer>
+        <div class="footer">
+          <FtButton @click="closeDialog">
+            取消
+          </FtButton>
+          <FtButton :loading="loading" :click-handle="onConfirm">
+            确定
+          </FtButton>
+        </div>
+      </template>
+    </FtDialog>
+  </div>
+</template>
+
+<style scoped>
+.add-content{
+  height: 50px;
+  display: flex;
+  align-items: center;
+}
+.footer{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 4rem;
+}
+.craft-tag{
+  display: flex;
+}
+</style>