Merge branch 'new'

src/components/BaseListTable.vue

@@ -109,7 +109,7 @@ export default {
       default: 0,
     },
   },
-  inject: ["urls"],
+  // inject: ["urls"],
   data() {
     return {
       dataList: [],

src/views/modules/pms/bomTechAndFiring/components/detail.vue

@@ -0,0 +1,317 @@
+<!-- 
+    filename: detail.vue
+    author: liubin
+    date: 2023-07-19 09:00:13
+    description: 
+-->
+
+<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: { 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;
+    },
+
+    async getTechDetailInfo() {
+      console.log("[getTechDetailInfo] this.techId: ", this.techId);
+      // 填充 dataForm
+      try {
+        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);
+        }
+      } catch (err) {
+        this.$message.error(err);
+      }
+    },
+
+    async getTechDetailList(params) {
+      // 填充 dataList
+      params = params
+        ? { ...params, page: this.page, limit: this.size }
+        : { key: "", techId: this.techId, page: this.page, limit: this.size };
+
+      try {
+        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;
+        }
+      } catch (err) {
+        this.$message.error(err);
+      }
+    },
+
+    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>
+.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>

src/views/modules/pms/bomTechAndFiring/components/edit.vue

@@ -0,0 +1,173 @@
+<!-- 
+    filename: edit.vue
+    author: liubin
+    date: 2023-07-19 09:00:04
+    description: 
+-->
+
+<template>
+  <el-dialog
+    class="dialog-just-form"
+    :visible="dialogVisible"
+    @close="handleClose"
+    :destroy-on-close="false"
+    :close-on-click-modal="false"
+    width="'50%'">
+    <!-- title  -->
+    <div slot="title" class="dialog-title">
+      <h1 class="">编辑</h1>
+    </div>
+
+    <!-- form  -->
+    <el-form ref="dataForm" :model="dataForm" v-loading="loading">
+      <el-row :gutter="20">
+        <el-col>
+          <el-form-item label="bom" prop="bomId" :rules="rules.bom">
+            <el-input v-model="dataForm.bomId" clearable disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col>
+          <el-form-item label="工艺" prop="techId" :rules="rules.tech">
+            <el-select v-model="dataForm.techId" filterable clearable>
+              <el-option
+                v-for="(tech, index) in techList"
+                :key="index"
+                :label="tech.label"
+                :value="tech.value"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- footer  -->
+    <div slot="footer">
+      <!-- <el-button @click="handleBtnClick('保存')">保存</el-button> -->
+      <el-button type="primary" @click="handleBtnClick('更新')">更新</el-button>
+      <el-button @click="handleBtnClick('取消')">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "BomTechAndFiringEdit",
+  components: {},
+  props: {},
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      dataForm: {
+        id: null,
+        bomId: null,
+        techId: null,
+      },
+      rules: {
+        bom: [],
+        tech: [{ required: true, message: "必填项不能为空", trigger: "blur" }],
+      },
+      techList: [],
+    };
+  },
+  computed: {},
+  mounted() {
+    this.getTechList().then(() => {
+      this.dialogVisible = true;
+    });
+  },
+  methods: {
+    // 初始化
+    init({ id, bomId, techId }) {
+      this.$set(this.dataForm, "id", id);
+      this.$set(this.dataForm, "bomId", bomId);
+      this.$set(this.dataForm, "techId", techId);
+    },
+    // 获取工艺列表
+    async getTechList() {
+      const { data: res } = await this.$http.post("/pms/equipmentTech/pageView", {
+        wsId: 3,
+        bom: "",
+        key: "",
+        limit: 999,
+        page: 1,
+      });
+      if (res.code == 0) {
+        console.log("res", res);
+        this.techList = res.data.list.map((item) => {
+          return {
+            label: item.code,
+            value: item.id,
+          };
+        });
+      }
+    },
+
+    // 提交更新
+    async push(type = "add") {
+      if (type == "add") {
+      } else if (type == "update") {
+      }
+    },
+
+    // 按钮事件
+    handleBtnClick(type) {
+      switch (type) {
+        // case "保存":
+        //   this.$refs.dataForm.validate((valid) => {
+        //     if (valid) {
+        //       this.$emit("emit-data", { type: "保存", data: this.dataForm });
+        //     }
+        //   });
+        //   break;
+        case "更新":
+          this.$refs.dataForm.validate((valid) => {
+            if (valid) {
+              this.$http.put("/pms/bomTech", this.dataForm).then((res) => {
+                if (res.data.code == 0) {
+                  this.$message.success("更新成功");
+                  this.handleClose(true);
+                } else {
+                  this.$message.error(res.data.msg);
+                }
+              });
+            }
+          });
+          break;
+        case "取消":
+          this.handleClose();
+          break;
+        default:
+          break;
+      }
+    },
+
+    handleClose(refresh = false) {
+      this.dialogVisible = false;
+      setTimeout(() => {
+        this.$emit("destroy", refresh);
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog-just-form >>> .el-dialog__body {
+  /* padding-top: 16px !important;
+  padding-bottom: 16px !important; */
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.el-select,
+.el-cascader,
+.el-date-editor {
+  width: 100% !important;
+}
+
+.dialog-just-form >>> .el-dialog__header {
+  padding: 10px 20px 10px;
+  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
+}
+</style>

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",
@@ -19,7 +19,7 @@ export default function () {
       width: 90,
       subcomponent: TableOperaionComponent,
       options: [
-        { name: "edit", label: "编辑", icon: "edit-outline" },
+        { name: "edit", label: "编辑", icon: "edit-outline", emitFull: true },
         // { name: "copy", label: "复制", icon: "copy-document" },
         // { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "" },
       ],

src/views/modules/pms/bomTechAndFiring/index.vue

@@ -1,24 +1,48 @@
 <template>
-  <ListViewWithHead
+  <!-- <ListViewWithHead
     :table-config="tableConfig"
     :head-config="headFormConfigs"
     :dialog-configs="dialogConfigs"
-    :list-query-extra="['key', 'tech']" />
+    :list-query-extra="['key', 'tech']" /> -->
   <!-- :list-query-extra="['key', 'bom', { wsId: 3 }]" -->
+  <div class="list-view-with-head" ref="pointer-loading-ref">
+    <BaseSearchForm :head-config="headFormConfigs" @btn-click="handleBtnClick" />
+
+    <BaseListTable
+      v-loading="tableLoading"
+      :table-config="tableConfig.table"
+      :column-config="tableConfig.column"
+      :table-data="dataList"
+      @operate-event="handleOperate"
+      :current-page="page"
+      :current-size="size"
+      :refresh-layout-key="refreshLayoutKey" />
+
+    <el-pagination
+      class="mt-5 flex justify-end"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page.sync="page"
+      :page-size.sync="size"
+      :page-sizes="[10, 20, 50, 100]"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+
+    <edit ref="edit" v-if="editVisible" @destroy="handleDestroy('edit', $event)" />
+    <detail ref="detail" v-if="detailVisible" @destroy="handleDestroy('detail')" />
+  </div>
 </template>
 
 <script>
 import initConfig from "./config";
-import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue";
+import BaseListTable from "@/components/BaseListTable.vue";
+import BaseSearchForm from "@/components/BaseSearchForm.vue";
+import edit from "./components/edit.vue";
+import detail from "./components/detail.vue";
 
 export default {
   name: "BomTechAndFiringView",
-  components: { ListViewWithHead },
-  provide() {
-    return {
-      urls: this.allUrls,
-    };
-  },
+  components: { BaseListTable, BaseSearchForm, edit, detail },
   data() {
     const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
     return {
@@ -26,12 +50,201 @@ export default {
       headFormConfigs,
       allUrls: urls,
       dialogConfigs,
+      dataList: [],
+      page: 1,
+      size: 20,
+      totalPage: 0,
+      urls,
+      tableLoading: false,
+      refreshLayoutKey: null,
+      editVisible: false,
+      detailVisible: false,
     };
   },
   created() {},
-  mounted() {},
-  methods: {},
+  mounted() {
+    // 更新页面默认 size
+    const size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20;
+    this.size = size;
+    this.getList();
+    // this.initDataWhenLoad && this.getList();
+  },
+  activated() {
+    this.refreshLayoutKey = this.layoutTable();
+  },
+  methods: {
+    /** 获取 列表数据 */
+    getList(queryParams) {
+      this.tableLoading = true;
+
+      const params = queryParams
+        ? { ...queryParams, page: this.page, limit: this.size }
+        : {
+            page: this.page,
+            limit: this.size,
+            key: "",
+            tech: "",
+          };
+
+      this.$http
+        .get(this.urls.page, {
+          params,
+        })
+        .then(({ data: res }) => {
+          console.log("[http response] res is: ", res);
+
+          if (res.code === 0) {
+            if ("list" in res.data) {
+              this.dataList = res.data.list;
+              this.totalPage = res.data.total;
+            } else if (Array.isArray(res.data)) {
+              this.dataList = res.data;
+            } else {
+              this.dataList.splice(0);
+              this.totalPage = 0;
+            }
+          } else {
+            this.$message({
+              message: `${res.code}: ${res.msg}`,
+              type: "error",
+              duration: 2000,
+            });
+          }
+          this.tableLoading = false;
+        })
+        .catch((err) => {
+          this.$message({
+            message: `${err}`,
+            type: "error",
+            duration: 2000,
+          });
+          this.tableLoading = false;
+        });
+    },
+
+    layoutTable() {
+      return Math.random();
+    },
+
+    handleBtnClick({ btnName, payload }) {
+      console.log("[search] form handleBtnClick", btnName, payload);
+      switch (btnName) {
+        case "查询":
+          this.getList({ ...payload });
+          break;
+      }
+    },
+
+    handleDestroy(type, refresh) {
+      console.log("[handleDestroy] ", type);
+      switch (type) {
+        case "edit":
+          this.editVisible = false;
+          if (refresh) {
+            this.getList();
+          }
+          break;
+        case "detail":
+          this.detailVisible = false;
+          break;
+      }
+    },
+
+    handleOperate({ type, data }) {
+      console.log("payload", type, data);
+      switch (type) {
+        case "delete": {
+          // 找到删除的 prompt 字段
+          const deleteConfig = data.head?.options?.find((item) => item.name === "delete");
+          let promptName = data.name ?? data.id;
+          if (deleteConfig && "promptField" in deleteConfig) {
+            promptName = data[deleteConfig.promptField];
+          }
+
+          let hintMsg = `确定要删除记录 "${promptName}" 吗?`;
+          if (promptName == data.id) {
+            // 如果 promptName 计算出来是 data.id 就以'该记录'代称
+            hintMsg = "确定删除该记录?";
+          }
+
+          let currenPageListLength = this.dataList.length;
+          // 确认是否删除
+          return this.$confirm(hintMsg, "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "我再想想",
+            type: "warning",
+          })
+            .then(() => {
+              this.$http({
+                url: this.urls.base,
+                method: "DELETE",
+                data: [`${data.id}`],
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success("删除成功!");
+                  if (currenPageListLength == 1) this.page = this.page > 1 ? this.page - 1 : 1;
+
+                  this.getList();
+                } else {
+                  this.$message({
+                    message: `${res.code}: ${res.msg}`,
+                    type: "error",
+                    duration: 1500,
+                  });
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "edit": {
+          console.log("[edit] ", data);
+          this.editVisible = true;
+          this.$nextTick(() => {
+            this.$refs.edit.init({
+              id: data.bomTechId,
+              bomId: data.id,
+              techId: data.techId,
+            });
+          });
+          break;
+        }
+        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.techId);
+          });
+          break;
+        }
+      }
+    },
+
+    handleSizeChange(val) {
+      // val 是新值
+      this.page = 1;
+      this.size = val;
+      this.getList(this.cachedSearchCondition);
+    },
+
+    handlePageChange(val) {
+      // val 是新值
+      this.getList(this.cachedSearchCondition);
+    },
+  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.list-view-with-head {
+  background: white;
+  /* height: 100%; */
+  min-height: inherit;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
+}
+</style>