add 配方详情
This commit is contained in:
		@@ -38,9 +38,9 @@
 | 
			
		||||
  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
 | 
			
		||||
    <script>
 | 
			
		||||
    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.103:8080/pms-am';
 | 
			
		||||
    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
 | 
			
		||||
    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.49:8080/pms-am'; // tengyun
 | 
			
		||||
    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.62:8080/pms-am'; // tao
 | 
			
		||||
    // window.SITE_CONFIG['apiURL'] = 'http://192.168.1.21:8080/pms-am'; // xv
 | 
			
		||||
    window.SITE_CONFIG['apiURL'] = 'http://192.168.1.21:8080/pms-am'; // xv
 | 
			
		||||
    </script>
 | 
			
		||||
  <% } %>
 | 
			
		||||
  <!-- 集成测试环境 -->
 | 
			
		||||
 
 | 
			
		||||
@@ -1,29 +1,494 @@
 | 
			
		||||
<!-- 这里单纯的配置表格页就好了-->
 | 
			
		||||
<!-- 表格页加上搜索条件 -->
 | 
			
		||||
<template>
 | 
			
		||||
	<div class="full-page w-full bg-slate-200">
 | 
			
		||||
		<BaseListTable :over-all="tableConfig.overAll" :table-config="tableConfig.props" :table-data="tableConfig.data" />
 | 
			
		||||
	</div>
 | 
			
		||||
  <div class="list-view">
 | 
			
		||||
    <el-row>
 | 
			
		||||
      <a style="margin: 0 0 16px 0; color: #0b58ff; display: flex; align-items: center; text-decoration: none; cursor: pointer;" title="返回上一页">
 | 
			
		||||
        <span style="margin-right: 6px;">
 | 
			
		||||
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
 | 
			
		||||
						<path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
 | 
			
		||||
          </svg>
 | 
			
		||||
        </span>
 | 
			
		||||
				<span style="line-height: 20px;">返回</span>
 | 
			
		||||
      </a>
 | 
			
		||||
    </el-row>
 | 
			
		||||
 | 
			
		||||
    <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-sizes="[1, 5, 10, 20, 50, 100]"
 | 
			
		||||
      :page-size="size"
 | 
			
		||||
      :total="totalPage"
 | 
			
		||||
      layout="total, sizes, prev, pager, next, jumper"
 | 
			
		||||
    ></el-pagination>
 | 
			
		||||
    <!-- :current-page.sync="currentPage"
 | 
			
		||||
			:page-size.sync="pageSize" -->
 | 
			
		||||
 | 
			
		||||
    <DialogWithMenu
 | 
			
		||||
      ref="edit-dialog"
 | 
			
		||||
      v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU"
 | 
			
		||||
      :dialog-visible.sync="dialogVisible"
 | 
			
		||||
      :configs="dialogConfigs"
 | 
			
		||||
      @refreshDataList="getList"
 | 
			
		||||
    />
 | 
			
		||||
    <DialogJustForm
 | 
			
		||||
      ref="edit-dialog"
 | 
			
		||||
      v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM"
 | 
			
		||||
      :dialog-visible.sync="dialogVisible"
 | 
			
		||||
      :configs="dialogConfigs"
 | 
			
		||||
      @refreshDataList="getList"
 | 
			
		||||
    />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
// TODO:
 | 
			
		||||
// 1. ListView 相关
 | 
			
		||||
import BaseListTable from '@/components/BaseListTable.vue';
 | 
			
		||||
import BaseListTable from "@/components/BaseListTable.vue";
 | 
			
		||||
import DialogWithMenu from "@/components/DialogWithMenu.vue";
 | 
			
		||||
import DialogJustForm from "@/components/DialogJustForm.vue";
 | 
			
		||||
import moment from "moment";
 | 
			
		||||
 | 
			
		||||
const DIALOG_WITH_MENU = "DialogWithMenu";
 | 
			
		||||
const DIALOG_JUST_FORM = "DialogJustForm";
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'ListView',
 | 
			
		||||
	components: { BaseListTable },
 | 
			
		||||
	props: {
 | 
			
		||||
		tableConfig: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			default: () => ({ props: [], data: [], overAll: undefined }),
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		return {};
 | 
			
		||||
	},
 | 
			
		||||
	methods: {},
 | 
			
		||||
  name: "ListView",
 | 
			
		||||
  components: { BaseListTable, DialogWithMenu, DialogJustForm },
 | 
			
		||||
  props: {
 | 
			
		||||
    tableConfig: {
 | 
			
		||||
      type: Object,
 | 
			
		||||
      default: () => ({
 | 
			
		||||
        /** 列配置, 即 props **/ column: [],
 | 
			
		||||
        /** 表格整体配置 */ table: undefined,
 | 
			
		||||
      }),
 | 
			
		||||
    },
 | 
			
		||||
    /** 请求page接口的时候有些字段是必填的,没有会报500,把相关字段名传入这个prop: */
 | 
			
		||||
    listQueryExtra: {
 | 
			
		||||
      type: Array,
 | 
			
		||||
      default: () => ["key"],
 | 
			
		||||
    },
 | 
			
		||||
    attachListQueryExtra: {
 | 
			
		||||
      // 新增时,附带 listQueryExtra 里的哪些键和对应值
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: "",
 | 
			
		||||
    },
 | 
			
		||||
    initDataWhenLoad: { type: Boolean, default: true },
 | 
			
		||||
    /** dialog configs 或许可以从 tableConfig 计算出来 computed... */
 | 
			
		||||
    dialogConfigs: {
 | 
			
		||||
      type: Object,
 | 
			
		||||
      default: () => null,
 | 
			
		||||
    },
 | 
			
		||||
    triggerUpdate: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: "",
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    dialogType() {
 | 
			
		||||
      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  activated() {
 | 
			
		||||
    console.log("list view with ehad activated..........");
 | 
			
		||||
    this.refreshLayoutKey = this.layoutTable();
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    triggerUpdate(val, oldVal) {
 | 
			
		||||
      if (val && val !== oldVal) {
 | 
			
		||||
        // get list
 | 
			
		||||
        this.getList();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      DIALOG_WITH_MENU,
 | 
			
		||||
      DIALOG_JUST_FORM,
 | 
			
		||||
      dialogVisible: false,
 | 
			
		||||
      topBtnConfig: null,
 | 
			
		||||
      totalPage: 100,
 | 
			
		||||
      page: 1,
 | 
			
		||||
      size: 20, // 默认20
 | 
			
		||||
      dataList: [],
 | 
			
		||||
      tableLoading: false,
 | 
			
		||||
      refreshLayoutKey: null,
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  inject: ["urls"],
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.initDataWhenLoad && this.getList();
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    /** 获取 列表数据 */
 | 
			
		||||
    getList(queryParams) {
 | 
			
		||||
      this.tableLoading = true;
 | 
			
		||||
 | 
			
		||||
      const params = queryParams
 | 
			
		||||
        ? { ...queryParams, page: this.page, limit: this.size }
 | 
			
		||||
        : {
 | 
			
		||||
            page: this.page,
 | 
			
		||||
            limit: this.size,
 | 
			
		||||
          };
 | 
			
		||||
 | 
			
		||||
      if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) {
 | 
			
		||||
        this.listQueryExtra.map((nameOrObj) => {
 | 
			
		||||
          if (typeof nameOrObj === "string") params[nameOrObj] = "";
 | 
			
		||||
          else if (typeof nameOrObj === "object") {
 | 
			
		||||
            Object.keys(nameOrObj).forEach((key) => {
 | 
			
		||||
              params[key] = nameOrObj[key];
 | 
			
		||||
            });
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      // if (this.urls.pageIsPostApi) {
 | 
			
		||||
      // } else {
 | 
			
		||||
      // 默认是 get 方式请求 page
 | 
			
		||||
      this.$http[this.urls.pageIsPostApi ? "post" : "get"](
 | 
			
		||||
        this.urls.page,
 | 
			
		||||
        this.urls.pageIsPostApi
 | 
			
		||||
          ? {
 | 
			
		||||
              ...params,
 | 
			
		||||
            }
 | 
			
		||||
          : {
 | 
			
		||||
              params,
 | 
			
		||||
            }
 | 
			
		||||
      )
 | 
			
		||||
        .then(({ data: res }) => {
 | 
			
		||||
          console.log("[http response] res is: ", res);
 | 
			
		||||
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            // page 场景:
 | 
			
		||||
            if ("list" in res.data) {
 | 
			
		||||
              /** 破碎记录的特殊需求:数据要结合单位 material + materialUnitDictValue */
 | 
			
		||||
              if ("attachDictValue" in this.tableConfig.column) {
 | 
			
		||||
                this.dataList = res.data.list.map((row) => {
 | 
			
		||||
                  this.tableConfig.column.attachDictValue(row, "unit", "qty", "materialUnitDictValue");
 | 
			
		||||
                  return row;
 | 
			
		||||
                });
 | 
			
		||||
              } else this.dataList = res.data.list;
 | 
			
		||||
 | 
			
		||||
              this.totalPage = res.data.total;
 | 
			
		||||
            } else if ("records" in res.data) {
 | 
			
		||||
              this.dataList = res.data.records.map((item) => ({
 | 
			
		||||
                ...item,
 | 
			
		||||
                id: item._id ?? item.id,
 | 
			
		||||
              }));
 | 
			
		||||
              this.totalPage = res.data.total;
 | 
			
		||||
            } 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();
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /** 处理 表格操作 */
 | 
			
		||||
    handleOperate({ type, data }) {
 | 
			
		||||
      console.log("payload", type, data);
 | 
			
		||||
      // 编辑、删除、跳转路由、打开弹窗(动态component)都可以在配置里加上 url
 | 
			
		||||
      // payload: { type: string, data: string | number | object }
 | 
			
		||||
      switch (type) {
 | 
			
		||||
        case "delete": {
 | 
			
		||||
          // 确认是否删除
 | 
			
		||||
          return this.$confirm(`确定要删除记录 "${data.name ?? data.id}" 吗?`, "提示", {
 | 
			
		||||
            confirmButtonText: "确认",
 | 
			
		||||
            cancelButtonText: "我再想想",
 | 
			
		||||
            type: "warning",
 | 
			
		||||
          })
 | 
			
		||||
            .then(() => {
 | 
			
		||||
              // this.$http.delete(this.urls.base + `/${data}`).then((res) => {
 | 
			
		||||
              this.$http({
 | 
			
		||||
                url: this.urls.base,
 | 
			
		||||
                method: "DELETE",
 | 
			
		||||
                data: [`${data.id}`],
 | 
			
		||||
              }).then(({ data: res }) => {
 | 
			
		||||
                if (res.code === 0) {
 | 
			
		||||
                  this.$message.success("删除成功!");
 | 
			
		||||
 | 
			
		||||
                  this.page = 1;
 | 
			
		||||
                  this.size = 10;
 | 
			
		||||
                  this.getList();
 | 
			
		||||
                } else {
 | 
			
		||||
                  this.$message({
 | 
			
		||||
                    message: `${res.code}: ${res.msg}`,
 | 
			
		||||
                    type: "error",
 | 
			
		||||
                    duration: 1500,
 | 
			
		||||
                  });
 | 
			
		||||
                }
 | 
			
		||||
              });
 | 
			
		||||
            })
 | 
			
		||||
            .catch((err) => {});
 | 
			
		||||
        }
 | 
			
		||||
        case "edit": {
 | 
			
		||||
          this.openDialog(data); /** data is ==> id */
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "view":
 | 
			
		||||
        case "view-detail-action": {
 | 
			
		||||
          this.openDialog(data, true);
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "view-blender-batch-details": {
 | 
			
		||||
          this.$router.push({
 | 
			
		||||
            name: "pms-blenderBatchDetails",
 | 
			
		||||
            query: {
 | 
			
		||||
              batchId: data,
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "status": {
 | 
			
		||||
          console.log("status", data);
 | 
			
		||||
          // TODO: 类似于这种字符串,可以统一集中到一个文件里
 | 
			
		||||
          const { id, code } = data;
 | 
			
		||||
          const queryCondition = { id, code };
 | 
			
		||||
          if ("enabled" in data) queryCondition.enabled = data["enabled"];
 | 
			
		||||
          if ("status" in data) queryCondition.status = data["status"];
 | 
			
		||||
          // 更改状态,更改状态需要 id 和 code 然后是 状态 enabled
 | 
			
		||||
          this.$http.put(this.urls.base, queryCondition).then(({ data: res }) => {
 | 
			
		||||
            if (res.code === 0) {
 | 
			
		||||
              // do nothing
 | 
			
		||||
            } else {
 | 
			
		||||
              this.$message({
 | 
			
		||||
                message: `${res.code}: ${res.msg}`,
 | 
			
		||||
                type: "error",
 | 
			
		||||
                duration: 1500,
 | 
			
		||||
              });
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "view-attachment": {
 | 
			
		||||
          this.openDialog(data, false, { key: "attachment" });
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "view-recipe": {
 | 
			
		||||
          this.openDialog(data, true, { key: "attr" });
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "copy": {
 | 
			
		||||
          return this.$http
 | 
			
		||||
            .post(this.urls.copyUrl, data, {
 | 
			
		||||
              headers: {
 | 
			
		||||
                "Content-Type": "application/json",
 | 
			
		||||
              },
 | 
			
		||||
            })
 | 
			
		||||
            .then(({ data: res }) => {
 | 
			
		||||
              if (res.code === 0) {
 | 
			
		||||
                this.$message({
 | 
			
		||||
                  message: "复制成功!",
 | 
			
		||||
                  type: "success",
 | 
			
		||||
                  duration: 1500,
 | 
			
		||||
                });
 | 
			
		||||
                this.getList();
 | 
			
		||||
              } else {
 | 
			
		||||
                this.$message({
 | 
			
		||||
                  message: `${res.code}: ${res.msg}`,
 | 
			
		||||
                  type: "error",
 | 
			
		||||
                  duration: 1500,
 | 
			
		||||
                });
 | 
			
		||||
              }
 | 
			
		||||
            })
 | 
			
		||||
            .catch((errMsg) => {
 | 
			
		||||
              this.$message({
 | 
			
		||||
                message: errMsg,
 | 
			
		||||
                type: "error",
 | 
			
		||||
                duration: 1500,
 | 
			
		||||
              });
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
        case "change-category": {
 | 
			
		||||
          return this.$http.put(this.urls.base, data).then(({ data: res }) => {
 | 
			
		||||
            if (res.code === 0) {
 | 
			
		||||
              this.$message({
 | 
			
		||||
                message: "修改成功",
 | 
			
		||||
                type: "success",
 | 
			
		||||
                duration: 1500,
 | 
			
		||||
                onClose: () => {
 | 
			
		||||
                  this.getList();
 | 
			
		||||
                },
 | 
			
		||||
              });
 | 
			
		||||
            } else {
 | 
			
		||||
              this.$message({
 | 
			
		||||
                message: `${res.code}: ${res.msg}`,
 | 
			
		||||
                type: "error",
 | 
			
		||||
                duration: 1500,
 | 
			
		||||
              });
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
        case "preview": {
 | 
			
		||||
          console.log("[PREVIEW] data", data);
 | 
			
		||||
          // report preview
 | 
			
		||||
          return this.$router.push({
 | 
			
		||||
            name: "pms-reportPreview",
 | 
			
		||||
            query: {
 | 
			
		||||
              name: data.name,
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
        case "design": {
 | 
			
		||||
          console.log("[DESIGN] data", data);
 | 
			
		||||
          // report design
 | 
			
		||||
          return this.$router.push({
 | 
			
		||||
            name: "pms-reportDesign",
 | 
			
		||||
            query: {
 | 
			
		||||
              name: data.name,
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
        case "detach": {
 | 
			
		||||
          return this.$http
 | 
			
		||||
            .post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
 | 
			
		||||
            .then(({ data: res }) => {
 | 
			
		||||
              if (res.code === 0) {
 | 
			
		||||
                this.$message({
 | 
			
		||||
                  message: "下发成功",
 | 
			
		||||
                  type: "success",
 | 
			
		||||
                  duration: 1500,
 | 
			
		||||
                  onClose: () => {
 | 
			
		||||
                    this.getList();
 | 
			
		||||
                  },
 | 
			
		||||
                });
 | 
			
		||||
              } else {
 | 
			
		||||
                this.$message({
 | 
			
		||||
                  message: `${res.code}: ${res.msg}`,
 | 
			
		||||
                  type: "error",
 | 
			
		||||
                  duration: 1500,
 | 
			
		||||
                });
 | 
			
		||||
              }
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    handleBtnClick({ btnName, payload }) {
 | 
			
		||||
      console.log("[search] form handleBtnClick", btnName, payload);
 | 
			
		||||
      switch (btnName) {
 | 
			
		||||
        case "新增":
 | 
			
		||||
          this.openDialog();
 | 
			
		||||
          break;
 | 
			
		||||
        case "查询": {
 | 
			
		||||
          const params = {};
 | 
			
		||||
 | 
			
		||||
          /** 处理 payload 里的数据 */
 | 
			
		||||
          if (typeof payload === "object") {
 | 
			
		||||
            // BaseSearchForm 给这个组件传递了数据
 | 
			
		||||
            Object.assign(params, payload);
 | 
			
		||||
            if ("timerange" in params && !!params.timerange) {
 | 
			
		||||
              const [startTime, endTime] = params["timerange"];
 | 
			
		||||
              delete params.timerange;
 | 
			
		||||
              params.startTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss");
 | 
			
		||||
              params.endTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss");
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
 | 
			
		||||
          /** 处理 listQueryExtra 里的数据 */
 | 
			
		||||
          this.listQueryExtra?.map((cond) => {
 | 
			
		||||
            if (typeof cond === "string") {
 | 
			
		||||
              if (!!payload[cond]) {
 | 
			
		||||
                params[cond] = payload[cond];
 | 
			
		||||
              } else {
 | 
			
		||||
                params[cond] = "";
 | 
			
		||||
              }
 | 
			
		||||
            } else if (typeof cond === "object") {
 | 
			
		||||
              Object.keys(cond).forEach((key) => {
 | 
			
		||||
                params[key] = cond[key];
 | 
			
		||||
              });
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
          console.log("查询", params);
 | 
			
		||||
          this.getList(params);
 | 
			
		||||
          break;
 | 
			
		||||
        }
 | 
			
		||||
        case "同步":
 | 
			
		||||
          this.$http.post(this.urls.syncUrl).then(({ data: res }) => {
 | 
			
		||||
            if (res.code === 0) {
 | 
			
		||||
              this.getList();
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
          break;
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /** 导航器的操作 */
 | 
			
		||||
    handleSizeChange(val) {
 | 
			
		||||
      // val 是新值
 | 
			
		||||
      this.page = 1;
 | 
			
		||||
      this.size = val;
 | 
			
		||||
      this.getList();
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    handlePageChange(val) {
 | 
			
		||||
      // val 是新值
 | 
			
		||||
      this.getList();
 | 
			
		||||
    },
 | 
			
		||||
 | 
			
		||||
    /** 打开对话框 */
 | 
			
		||||
    openDialog(row_id, detail_mode, tag_info) {
 | 
			
		||||
      this.dialogVisible = true;
 | 
			
		||||
      let extraParams = null;
 | 
			
		||||
      if (this.attachListQueryExtra && this.listQueryExtra.length) {
 | 
			
		||||
        this.listQueryExtra.forEach((item) => {
 | 
			
		||||
          let found = item[this.attachListQueryExtra];
 | 
			
		||||
          if (found !== null && found !== undefined) extraParams = item;
 | 
			
		||||
        });
 | 
			
		||||
      }
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        console.log(`[edit-dialog] extraParams: ${extraParams}`);
 | 
			
		||||
        this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info, extraParams);
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped></style>
 | 
			
		||||
<style scoped>
 | 
			
		||||
.list-view {
 | 
			
		||||
  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);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.w-6 {
 | 
			
		||||
  width: 18px;
 | 
			
		||||
}
 | 
			
		||||
.h-6 {
 | 
			
		||||
  height: 18px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,20 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div>
 | 
			
		||||
    <!-- 用于展示 http://rp.picaiba.com/am/2022-12-08/#id=l1p50r&p=%E6%96%B0%E5%A2%9E_%E7%BC%96%E8%BE%91_7&g=1 这样的页面 -->
 | 
			
		||||
    <!-- 1.详情字段较多
 | 
			
		||||
    2.展示列表
 | 
			
		||||
    3.列表和详情字段,需要分为两个或多个 tag(比如: 详情字段+检测工艺明细列表+包装工艺明细列表), 可点击在同一个页面切换 -->
 | 
			
		||||
      
 | 
			
		||||
    <!-- 要有 只读模式 配置 -->
 | 
			
		||||
  </div>
 | 
			
		||||
  </template>
 | 
			
		||||
  
 | 
			
		||||
  
 | 
			
		||||
  <script>
 | 
			
		||||
  export default { name: '', props:{}, data() {return {}}, created() {}, mounted() {}, methods: {}}
 | 
			
		||||
  </script>
 | 
			
		||||
  
 | 
			
		||||
  
 | 
			
		||||
  <style scoped>
 | 
			
		||||
  
 | 
			
		||||
  </style>
 | 
			
		||||
@@ -1,17 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
<div>
 | 
			
		||||
  <!-- 用于展示 http://rp.picaiba.com/am/2022-12-08/#id=8eeu8x&p=%E6%9F%A5%E7%9C%8B%E6%A3%80%E6%B5%8B%E5%B7%A5%E8%89%BA&g=1 这样的页面 -->
 | 
			
		||||
  <!-- 1.详情字段较少
 | 
			
		||||
  2.展示列表 -->
 | 
			
		||||
</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default { name: '', props:{}, data() {return {}}, created() {}, mounted() {}, methods: {}}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
@@ -8,16 +8,18 @@ export default function () {
 | 
			
		||||
    { type: "index", label: "序号" },
 | 
			
		||||
    { prop: "createTime", label: "添加时间", filter: timeFilter },
 | 
			
		||||
    { prop: "name", label: "牌号" },
 | 
			
		||||
    { prop: "code", label: "配方编码" },
 | 
			
		||||
    { prop: "externalCode", label: "版本号" },
 | 
			
		||||
    // { prop: "code", label: "配方编码" },
 | 
			
		||||
    // { prop: "externalCode", label: "版本号" },
 | 
			
		||||
    // { prop: "specifications", label: "程序号" },
 | 
			
		||||
    // { prop: "unitDictValue", label: "砖型", filter: dictFilter("unit") },
 | 
			
		||||
    // { prop: "unitDictValue", label: "物料号", filter: dictFilter("unit") },
 | 
			
		||||
    // { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
 | 
			
		||||
    { prop: "sumqty", label: "配方总重量[kg]", filter: val => !!val ? val + ' kg' : '-' },
 | 
			
		||||
    { prop: "sync", label: "同步状态" },
 | 
			
		||||
    { prop: "remark", label: "备注" },
 | 
			
		||||
    { prop: "description", label: "详情", subcomponent: TableTextComponent, buttonContent: "查看配方详情", actionName: 'view-recipe' },
 | 
			
		||||
    // { prop: "sumqty", label: "配方总重量[kg]", filter: val => !!val ? val + ' kg' : '-' },
 | 
			
		||||
    // { prop: "sync", label: "同步状态" },
 | 
			
		||||
    // { prop: "syncTime", label: "同步时间", fitler: timeFilter },
 | 
			
		||||
    // { prop: "remark", label: "备注" },
 | 
			
		||||
    // { prop: "description", label: "详情", subcomponent: TableTextComponent, buttonContent: "查看配方详情", actionName: 'view-recipe' },
 | 
			
		||||
    { prop: "description", label: "配方", subcomponent: TableTextComponent, buttonContent: "查看配方", actionName: 'view-recipe' },
 | 
			
		||||
    {
 | 
			
		||||
      prop: "operations",
 | 
			
		||||
      name: "操作",
 | 
			
		||||
@@ -45,17 +47,24 @@ export default function () {
 | 
			
		||||
    {
 | 
			
		||||
      button: {
 | 
			
		||||
        type: "plain",
 | 
			
		||||
        name: "新增",
 | 
			
		||||
        permission: "pms:bom:save",
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      button: {
 | 
			
		||||
        // type: "plain",
 | 
			
		||||
        name: "同步",
 | 
			
		||||
        type: 'primary'
 | 
			
		||||
        name: "导入",
 | 
			
		||||
        permission: "",
 | 
			
		||||
      },
 | 
			
		||||
    },
 | 
			
		||||
    // {
 | 
			
		||||
    //   button: {
 | 
			
		||||
    //     type: "plain",
 | 
			
		||||
    //     name: "新增",
 | 
			
		||||
    //     permission: "pms:bom:save",
 | 
			
		||||
    //   },
 | 
			
		||||
    // },
 | 
			
		||||
    // {
 | 
			
		||||
    //   button: {
 | 
			
		||||
    //     // type: "plain",
 | 
			
		||||
    //     name: "同步",
 | 
			
		||||
    //     type: 'primary'
 | 
			
		||||
    //   },
 | 
			
		||||
    // },
 | 
			
		||||
  ];
 | 
			
		||||
 | 
			
		||||
  const dictList = JSON.parse(localStorage.getItem("dictList") || {});
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										93
									
								
								src/views/modules/pms/bomDetails/config.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										93
									
								
								src/views/modules/pms/bomDetails/config.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,93 @@
 | 
			
		||||
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
 | 
			
		||||
// import switchBtn from "@/components/noTemplateComponents/switchBtn";
 | 
			
		||||
import request from "@/utils/request";
 | 
			
		||||
import { dictFilter } from '@/utils/filters'
 | 
			
		||||
import { timeFilter } from '@/utils/filters'
 | 
			
		||||
 | 
			
		||||
export default function () {
 | 
			
		||||
  const tableProps = [
 | 
			
		||||
    { type: 'index', label: '序号' },
 | 
			
		||||
    { prop: "createTime", label: "添加时间", filter: timeFilter },
 | 
			
		||||
    { prop: "name", label: "料仓名称" },
 | 
			
		||||
    { prop: "code", label: "料仓编码" },
 | 
			
		||||
    { prop: "typeDictValue", label: "料仓类型", filter: dictFilter('liaocang') },
 | 
			
		||||
    // { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
 | 
			
		||||
    { prop: "materialTypeDictValue", label: "物料类型", filter: dictFilter('material_category') },
 | 
			
		||||
    { prop: "density", label: "物料堆积密度" },
 | 
			
		||||
    { prop: "dosHigh", label: "加料上限" },
 | 
			
		||||
    { prop: "dosLow", label: "加料下限" },
 | 
			
		||||
    { prop: "description", label: "描述" },
 | 
			
		||||
    { prop: "remark", label: "备注" },
 | 
			
		||||
    {
 | 
			
		||||
      prop: "operations",
 | 
			
		||||
      name: "操作",
 | 
			
		||||
      fixed: "right",
 | 
			
		||||
      width: 90,
 | 
			
		||||
      subcomponent: TableOperaionComponent,
 | 
			
		||||
      options: [{ name: "edit", label: "编辑", icon: "edit-outline" }, { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:materialStorage:delete" }],
 | 
			
		||||
    },
 | 
			
		||||
  ];
 | 
			
		||||
 | 
			
		||||
  /**
 | 
			
		||||
   * dialog config 有两个版本,一个适用于 DialogWithMenu 组件,另一个适用于 DialogJustForm 组件
 | 
			
		||||
   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
 | 
			
		||||
   * 此为后者的配置:
 | 
			
		||||
   */
 | 
			
		||||
  const dialogJustFormConfigs = {
 | 
			
		||||
    form: {
 | 
			
		||||
      rows: [
 | 
			
		||||
        [
 | 
			
		||||
          {
 | 
			
		||||
            input: true,
 | 
			
		||||
            label: "料仓名称",
 | 
			
		||||
            prop: "name",
 | 
			
		||||
            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
 | 
			
		||||
            elparams: { placeholder: "请输入料仓名称" },
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            input: true,
 | 
			
		||||
            label: "料仓编码",
 | 
			
		||||
            prop: "code",
 | 
			
		||||
            rules: { required: true, message: "必填项不能为空", trigger: "blur" },
 | 
			
		||||
            elparams: { placeholder: "请输入料仓编码" },
 | 
			
		||||
          }, {
 | 
			
		||||
            select: true,
 | 
			
		||||
            label: "料仓类型",
 | 
			
		||||
            prop: "typeDictValue",
 | 
			
		||||
            // fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
 | 
			
		||||
            options: [
 | 
			
		||||
              // TODO: 或许映射可以全权交给数据字典
 | 
			
		||||
              { label: '中间仓', value: '0' },
 | 
			
		||||
              { label: '日料仓', value: '1' },
 | 
			
		||||
            ],
 | 
			
		||||
            rules: { required: true, message: "必填项不能为空", trigger: "change" },
 | 
			
		||||
          },
 | 
			
		||||
        ],
 | 
			
		||||
        [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
 | 
			
		||||
        [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
 | 
			
		||||
      ],
 | 
			
		||||
      operations: [
 | 
			
		||||
        { name: "add", label: "保存", type: "primary", permission: "pms:materialStorage:save", showOnEdit: false },
 | 
			
		||||
        { name: "update", label: "更新", type: "primary", permission: "pms:materialStorage:update", showOnEdit: true },
 | 
			
		||||
        { name: "reset", label: "重置", type: "warning", showAlways: true },
 | 
			
		||||
        // { name: 'cancel', label: '取消', showAlways: true },
 | 
			
		||||
      ],
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
  // 备注:弹窗弹出的时间和网速有关......
 | 
			
		||||
 | 
			
		||||
  return {
 | 
			
		||||
    dialogConfigs: dialogJustFormConfigs,
 | 
			
		||||
    tableConfig: {
 | 
			
		||||
      table: null, // 此处可省略,el-table 上的配置项
 | 
			
		||||
      column: tableProps, // el-column-item 上的配置项
 | 
			
		||||
    },
 | 
			
		||||
    urls: {
 | 
			
		||||
      base: "/pms/materialStorageDynamic",
 | 
			
		||||
      page: "/pms/materialStorageDynamic/page",
 | 
			
		||||
      // subase: '/pms/blenderStepParam',
 | 
			
		||||
      // subpage: '/pms/blenderStepParam/page',
 | 
			
		||||
      // more...
 | 
			
		||||
    },
 | 
			
		||||
  };
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										31
									
								
								src/views/modules/pms/bomDetails/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										31
									
								
								src/views/modules/pms/bomDetails/index.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,31 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<ListView :table-config="tableConfig" :dialog-configs="dialogConfigs" :listQueryExtra="['name']" />
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import initConfig from './config';
 | 
			
		||||
import ListView from '@/views/atomViews/ListView.vue';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
	name: 'BomDetailsView',
 | 
			
		||||
	components: { ListView },
 | 
			
		||||
	provide() {
 | 
			
		||||
		return {
 | 
			
		||||
			urls: this.allUrls
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	data() {
 | 
			
		||||
		const { tableConfig, urls, dialogConfigs } = initConfig.call(this);
 | 
			
		||||
		return {
 | 
			
		||||
			tableConfig,
 | 
			
		||||
			allUrls: urls,
 | 
			
		||||
			dialogConfigs,
 | 
			
		||||
		};
 | 
			
		||||
	},
 | 
			
		||||
	created() {},
 | 
			
		||||
	mounted() {},
 | 
			
		||||
	methods: {},
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped></style>
 | 
			
		||||
@@ -125,9 +125,9 @@ export default function () {
 | 
			
		||||
        { prop: "name", label: "参数名称", isEditField: true },
 | 
			
		||||
        { prop: "code", label: "参数编码", isEditField: true },
 | 
			
		||||
        // { prop: "specifications", label: "规格", isEditField: true },
 | 
			
		||||
        { prop: "value", label: "参数值", isEditField: true },
 | 
			
		||||
        { prop: "valueFloor", label: "参数值下限", isEditField: true },
 | 
			
		||||
        { prop: "valueTop", label: "参数值上限", isEditField: true },
 | 
			
		||||
        { width: 80, prop: "value", label: "参数值", isEditField: true },
 | 
			
		||||
        // { prop: "valueFloor", label: "参数值下限", isEditField: true },
 | 
			
		||||
        // { prop: "valueTop", label: "参数值上限", isEditField: true },
 | 
			
		||||
        { prop: "description", label: "描述", isEditField: true },
 | 
			
		||||
        {
 | 
			
		||||
          prop: "operations",
 | 
			
		||||
 
 | 
			
		||||
@@ -130,9 +130,9 @@ export default function () {
 | 
			
		||||
        { prop: "name", label: "参数名称", isEditField: true },
 | 
			
		||||
        { prop: "code", label: "参数编码", isEditField: true },
 | 
			
		||||
        // { prop: "specifications", label: "规格", isEditField: true },
 | 
			
		||||
        { prop: "value", label: "参数值", isEditField: true },
 | 
			
		||||
        { prop: "valueFloor", label: "参数值下限", isEditField: true },
 | 
			
		||||
        { prop: "valueTop", label: "参数值上限", isEditField: true },
 | 
			
		||||
        { width: 80, prop: "value", label: "参数值", isEditField: true },
 | 
			
		||||
        // { prop: "valueFloor", label: "参数值下限", isEditField: true },
 | 
			
		||||
        // { prop: "valueTop", label: "参数值上限", isEditField: true },
 | 
			
		||||
        { prop: "description", label: "描述", isEditField: true },
 | 
			
		||||
        {
 | 
			
		||||
          prop: "operations",
 | 
			
		||||
 
 | 
			
		||||
@@ -131,9 +131,9 @@ export default function () {
 | 
			
		||||
        { prop: "name", label: "参数名称", isEditField: true },
 | 
			
		||||
        { prop: "code", label: "参数编码", isEditField: true },
 | 
			
		||||
        // { prop: "specifications", label: "规格", isEditField: true },
 | 
			
		||||
        { prop: "value", label: "参数设定值", isEditField: true },
 | 
			
		||||
        { prop: "valueFloor", label: "参数值下限", isEditField: true },
 | 
			
		||||
        { prop: "valueTop", label: "参数值上限", isEditField: true },
 | 
			
		||||
        { width: 80, prop: "value", label: "参数值", isEditField: true },
 | 
			
		||||
        // { prop: "valueFloor", label: "参数值下限", isEditField: true },
 | 
			
		||||
        // { prop: "valueTop", label: "参数值上限", isEditField: true },
 | 
			
		||||
        { prop: "description", label: "描述", isEditField: true },
 | 
			
		||||
        {
 | 
			
		||||
          prop: "operations",
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user