From 35758a3b2d1d46e56798709d6f3524b16c007242 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Wed, 19 Jul 2023 16:12:24 +0800
Subject: [PATCH] update bomTechAndFiring

---
 .../bomTechAndFiring/components/detail.vue    | 303 +++++++++++++++++-
 .../pms/bomTechAndFiring/components/edit.vue  |   2 -
 .../modules/pms/bomTechAndFiring/config.js    |   2 +-
 .../modules/pms/bomTechAndFiring/index.vue    |  12 +-
 4 files changed, 302 insertions(+), 17 deletions(-)

diff --git a/src/views/modules/pms/bomTechAndFiring/components/detail.vue b/src/views/modules/pms/bomTechAndFiring/components/detail.vue
index 0820cb4..277140a 100644
--- a/src/views/modules/pms/bomTechAndFiring/components/detail.vue
+++ b/src/views/modules/pms/bomTechAndFiring/components/detail.vue
@@ -5,21 +5,304 @@
     description: 
 -->
 
-<template></template>
+<template>
+  <el-dialog
+    class="dialog-with-menu"
+    :visible="dialogVisible"
+    :destroy-on-close="false"
+    @close="handleClose"
+    :close-on-click-modal="false">
+    <!-- title  -->
+    <div slot="title" class="dialog-title">
+      <h1 class="">查看详情</h1>
+    </div>
+
+    <div class="dialog-body__inner relative">
+      <!-- menu  -->
+      <el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
+        <el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name">
+          <span class="slot" slot="label">
+            <i
+              :class="{
+                'el-icon-edit': tab.key === 'info',
+                'el-icon-s-data': tab.key === 'attr',
+                'el-icon-folder-opened': tab.key === 'attachment',
+              }"></i>
+            {{ tab.name }}
+          </span>
+
+          <!-- 表单标签页 -->
+          <div v-if="tab.key === 'info'" key="tech-info">
+            <!-- form  -->
+            <el-form ref="dataForm" :model="dataForm" v-loading="loading">
+              <el-row :gutter="20">
+                <el-col>
+                  <el-form-item label="工艺编码" prop="code" :rules="rules.code">
+                    <el-input v-model="dataForm.code" clearable disabled />
+                  </el-form-item>
+                </el-col>
+                <el-col>
+                  <el-form-item label="备注" prop="remark" :rules="rules.remark">
+                    <el-input v-model="dataForm.remark" clearable disabled />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+
+          <!-- 表格标签页 -->
+          <div v-if="tab.key === 'attr'" key="attr-list">
+            <BaseListTable
+              :table-config="null"
+              :column-config="techTableProps"
+              :table-data="dataList"
+              @operate-event="handleOperate"
+              :current-page="page"
+              :current-size="size"
+              :refresh-layout-key="Math.random()"
+              v-loading="loading" />
+
+            <el-pagination
+              style="text-align: left"
+              background
+              @size-change="handleSizeChange"
+              @current-change="handlePageChange"
+              :current-page.sync="page"
+              :page-sizes="[10, 20, 50]"
+              :page-size="size"
+              :total="total"
+              layout="total, sizes, prev, next"></el-pagination>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <!-- sub dialog  -->
+    <!-- <small-dialog
+      :append-to-body="true"
+      v-if="showSubDialog"
+      ref="subDialog"
+      :url="urls.subase"
+      :configs="configs.subDialog"
+      :related-id="dataForm.id"
+      @refreshDataList="getSubList"></small-dialog> -->
+
+    <!-- footer  -->
+    <div slot="footer">
+      <el-button @click="handleBtnClick('取消')">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
 
 <script>
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
+import BaseListTable from "@/components/BaseListTable.vue";
+
 export default {
-    name: "BomTechAndFiringDetail",
-    components: {},
-    props: {},
-    data() {
-        return {}
+  name: "BomTechAndFiringDetail",
+  components: {BaseListTable},
+  props: {},
+  data() {
+    return {
+      dialogVisible: false,
+      activeMenu: "烧成曲线",
+      actualMenus: [
+        { name: "烧成曲线", key: "info" },
+        { name: "工艺参数", key: "attr", onlyEditMode: true },
+      ],
+      dataForm: {
+        code: "",
+        remark: "",
+      },
+      rules: {
+        code: [],
+        remark: [],
+      },
+      loading: false,
+      page: 1,
+      size: 20,
+      total: 0,
+      dataList: [],
+      techTableProps: [
+        { prop: "name", label: "参数名称" },
+        { prop: "code", label: "参数编码" },
+        { width: 80, prop: "value", label: "参数值" },
+        { prop: "description", label: "描述" },
+        // {
+        //   prop: "operations",
+        //   name: "操作",
+        //   fixed: "right",
+        //   width: 90,
+        //   subcomponent: TableOperaionComponent,
+        //   options: [
+        //     { name: "edit", label: "编辑", icon: "edit-outline", permission: "" },
+        //     // { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:blenderStepParam:delete" },
+        //   ],
+        // },
+      ],
+    };
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    async init(techId) {
+      this.techId = techId;
+      this.dialogVisible = true;
+      this.loading = true;
+      await this.getTechDetailInfo();
+      await this.getTechDetailList();
+      this.loading = false;
     },
-    computed: {},
-    methods: {},
-}
+
+    async getTechDetailInfo() {
+      console.log("[getTechDetailInfo] this.techId: ", this.techId);
+      // 填充 dataForm
+      const { data: res } = await this.$http.get(`/pms/equipmentTech/${this.techId}`);
+      if (res.code == 0) {
+        // console.log('[getTechDetailInfo] res.data: ', res.data)
+        // return;
+        this.$set(this.dataForm, "code", res.data.code);
+        this.$set(this.dataForm, "remark", res.data.remark);
+      }
+    },
+
+    async getTechDetailList(params) {
+      // 填充 dataList
+      params = params
+        ? { ...params, page: this.page, limit: this.size }
+        : { key: "", techId: this.techId, page: this.page, limit: this.size };
+      const { data: res } = await this.$http.get("/pms/equipmentTechParam/page", { params });
+      if (res.code == 0) {
+        console.log("[getTechDetailList] res.data: ", res.data);
+        this.dataList = res.data.list;
+        this.total = res.data.total;
+      }
+    },
+
+    handleTabClick(v) {
+      //   console.log("handleTabClick: ", v);
+    },
+
+    handleOperate() {},
+
+    /** 导航器的操作 */
+    handleSizeChange(val) {
+      // val 是新值
+      this.page = 1;
+      this.size = val;
+      this.getTechDetailList();
+    },
+
+    handlePageChange(val) {
+      // val 是新值
+      this.getTechDetailList();
+    },
+
+    handleBtnClick(type) {
+      if (type == "取消") {
+        this.handleClose();
+      }
+    },
+
+    handleClose(refresh = false) {
+      this.dialogVisible = false;
+      setTimeout(() => {
+        this.$emit("destroy", refresh);
+      }, 500);
+    },
+  },
+};
 </script>
 
-<style scoped lang="scss">
+<style scoped>
+.el-menu {
+  margin: 16px 0 !important;
+}
 
+.el-menu.el-menu--horizontal {
+  border: none !important;
+  /* background: #0f02 !important; */
+}
+
+/* .el-menu--horizontal > .el-menu-item.is-active { */
+/* border-bottom-color: #0b58ff; */
+/* } */
+
+.dialog-with-menu >>> .el-dialog__body {
+  /* padding-top: 16px !important;
+  padding-bottom: 16px !important; */
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.el-select,
+.el-cascader {
+  width: 100% !important;
+}
+
+.dialog-with-menu >>> .el-dialog__header {
+  padding: 10px 20px 10px;
+  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
+}
+
+.relative {
+  position: relative;
+}
+
+.at-right-top {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10000;
+}
+
+ul.file-list,
+ul.file-list > li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.file-list {
+  max-height: 20vh;
+  overflow-y: auto;
+  margin-top: 12px;
+  /* width: 240px; */
+  display: flex;
+  flex-direction: column;
+}
+
+ul.file-list > li {
+  border-radius: 4px;
+  background-color: #edededd2;
+  padding: 8px;
+  margin-bottom: 2px;
+  display: flex;
+  justify-content: space-between;
+}
+
+ul.file-list > li:hover {
+  background-color: #ededed;
+}
+
+.file-operations {
+  display: flex;
+}
+
+.file-icon {
+  margin-right: 8px;
+  font-size: 16px;
+  line-height: 1;
+  display: flex;
+  place-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+/* .image-preview-dialog {
+} */
+
+.force-disabled {
+  margin-top: 42px;
+}
 </style>
diff --git a/src/views/modules/pms/bomTechAndFiring/components/edit.vue b/src/views/modules/pms/bomTechAndFiring/components/edit.vue
index f01ac15..5f47eaa 100644
--- a/src/views/modules/pms/bomTechAndFiring/components/edit.vue
+++ b/src/views/modules/pms/bomTechAndFiring/components/edit.vue
@@ -50,8 +50,6 @@
 </template>
 
 <script>
-import { ref } from "vue";
-
 export default {
   name: "BomTechAndFiringEdit",
   components: {},
diff --git a/src/views/modules/pms/bomTechAndFiring/config.js b/src/views/modules/pms/bomTechAndFiring/config.js
index 11619f2..d6001f0 100644
--- a/src/views/modules/pms/bomTechAndFiring/config.js
+++ b/src/views/modules/pms/bomTechAndFiring/config.js
@@ -10,7 +10,7 @@ export default function () {
     { prop: "name", label: "牌号" },
     // { prop: "createTime", label: "添加时间", filter: timeFilter },
     { prop: "techCode", label: "烧制曲线" },
-    { prop: "description", label: "详情", subcomponent: TableTextComponent },
+    { prop: "description", label: "详情", subcomponent: TableTextComponent, emitFullData: true },
     // { prop: "remark", label: "备注" },
     {
       prop: "operations",
diff --git a/src/views/modules/pms/bomTechAndFiring/index.vue b/src/views/modules/pms/bomTechAndFiring/index.vue
index 9171cdb..0e2ed4c 100644
--- a/src/views/modules/pms/bomTechAndFiring/index.vue
+++ b/src/views/modules/pms/bomTechAndFiring/index.vue
@@ -208,11 +208,15 @@ export default {
           });
           break;
         }
-        case "detail": {
-          console.log("[detail] ", data);
-          this.detailVisible = true;
+        case "view-detail-action": {
+          console.log("[detail] ", data, data.techId);
+          if (!data || !data.techId) {
+            this.$message.warning("暂无详请可供查看");
+            return;
+          }
+          this.detailVisible = true; 
           this.$nextTick(() => {
-            this.$refs.detail.init(data);
+            this.$refs.detail.init(data.techId);
           });
           break;
         }