生产记录

yyb

3 小时以前 44c1a1c40029e0eeef20a33f551a42e174cdac64

生产记录

 src/api/productionManagement/productionRecords.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,38 @@
// ç”Ÿäº§è®°å½•ï¼ˆå‚数）接口
import request from "@/utils/request";

// åˆ†é¡µæŸ¥è¯¢
export function listPage(query) {
  return request({
    url: "/productParameter/listPage",
    method: "get",
    params: query,
  });
}

// æ–°å¢ž
export function add(data) {
  return request({
    url: "/productParameter/addProductParameter",
    method: "post",
    data: data,
  });
}

// ä¿®æ”¹
export function update(data) {
  return request({
    url: "/productParameter/updProductParameter",
    method: "put",
    data: data,
  });
}

// åˆ é™¤ ids ä¸ºæ•°ç»„时会拼成 productParameter/1,2,3
export function del(ids) {
  const idStr = Array.isArray(ids) ? ids.join(",") : ids;
  return request({
    url: `/productParameter/${idStr}`,
    method: "delete",
  });
}

 src/views/productionManagement/productionRecords/Edit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,165 @@
<template>
  <div>
    <el-dialog
      v-model="isShow"
      title="编辑生产记录"
      width="520px"
      @close="closeModal"
    >
      <el-form
        ref="formRef"
        label-width="120px"
        :model="formState"
        label-position="top"
      >
        <el-form-item
          label="参数项"
          prop="parameterItem"
          :rules="[{ required: true, message: '请输入参数项' }]"
        >
          <el-input v-model="formState.parameterItem" placeholder="请输入参数项" />
        </el-form-item>
        <el-form-item
          label="参数类型"
          prop="type"
          :rules="[{ required: true, message: '请选择参数类型' }]"
        >
          <el-select v-model="formState.type" placeholder="请选择参数类型" style="width: 100%;">
            <el-option
              v-for="dict in parameter_tyep"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="单位"
          prop="unit"
          :rules="[{ required: true, message: '请输入单位' }]"
        >
          <el-input v-model="formState.unit" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="参数格式" prop="parameterFormat">
          <el-input v-model="formState.parameterFormat" placeholder="请输入参数格式（选填）" />
        </el-form-item>
        <el-form-item
          label="是否必填"
          prop="isRequired"
          :rules="[{ required: true, message: '请选择是否必填' }]"
        >
          <el-select v-model="formState.isRequired" placeholder="请选择" style="width: 100%;">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance, watch } from "vue";
import { update } from "@/api/productionManagement/productionRecords.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  record: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:visible", "completed"]);

const formRef = ref(null);
const formState = ref({
  id: undefined,
  code: "",
  parameterItem: "",
  type: "",
  unit: "",
  parameterFormat: "",
  isRequired: undefined,
});

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit("update:visible", val);
  },
});

// å›žæ˜¾ï¼šç›‘听 record å˜åŒ–
watch(
  () => props.record,
  (newRecord) => {
    if (newRecord && Object.keys(newRecord).length) {
      formState.value = {
        id: newRecord.id,
        code: newRecord.code ?? "",
        parameterItem: newRecord.parameterItem ?? "",
        type: newRecord.type ?? "",
        unit: newRecord.unit ?? "",
        parameterFormat: newRecord.parameterFormat ?? "",
        isRequired: newRecord.isRequired,
      };
    }
  },
  { immediate: true, deep: true }
);

// å¼¹çª—打开时重新回显
watch(
  () => props.visible,
  (visible) => {
    if (visible && props.record && Object.keys(props.record).length) {
      formState.value = {
        id: props.record.id,
        code: props.record.code ?? "",
        parameterItem: props.record.parameterItem ?? "",
        type: props.record.type ?? "",
        unit: props.record.unit ?? "",
        parameterFormat: props.record.parameterFormat ?? "",
        isRequired: props.record.isRequired,
      };
    }
  }
);

const { proxy } = getCurrentInstance();
const { parameter_tyep } = proxy.useDict("parameter_tyep");

const closeModal = () => {
  isShow.value = false;
};

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      update(formState.value).then(() => {
        isShow.value = false;
        emit("completed");
        proxy.$modal.msgSuccess("修改成功");
      });
    }
  });
};

defineExpose({
  closeModal,
  handleSubmit,
  isShow,
});
</script>

 src/views/productionManagement/productionRecords/New.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,122 @@
<template>
  <div>
    <el-dialog
      v-model="isShow"
      title="新增生产记录"
      width="520px"
      @close="closeModal"
    >
      <el-form
        ref="formRef"
        label-width="120px"
        :model="formState"
        label-position="top"
      >
        <el-form-item
          label="参数项"
          prop="parameterItem"
          :rules="[{ required: true, message: '请输入参数项' }]"
        >
          <el-input v-model="formState.parameterItem" placeholder="请输入参数项" />
        </el-form-item>
        <el-form-item
          label="参数类型"
          prop="type"
          :rules="[{ required: true, message: '请选择参数类型' }]"
        >
          <el-select v-model="formState.type" placeholder="请选择参数类型" style="width: 100%;">
            <el-option
              v-for="dict in parameter_tyep"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="单位"
          prop="unit"
          :rules="[{ required: true, message: '请输入单位' }]"
        >
          <el-input v-model="formState.unit" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="参数格式" prop="parameterFormat">
          <el-input v-model="formState.parameterFormat" placeholder="请输入参数格式（选填）" />
        </el-form-item>
        <el-form-item
          label="是否必填"
          prop="isRequired"
          :rules="[{ required: true, message: '请选择是否必填' }]"
        >
          <el-select v-model="formState.isRequired" placeholder="请选择" style="width: 100%;">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确认</el-button>
          <el-button @click="closeModal">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, getCurrentInstance } from "vue";
import { add } from "@/api/productionManagement/productionRecords.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
});

const emit = defineEmits(["update:visible", "completed"]);

const formRef = ref(null);
const formState = ref({
  parameterItem: "",
  type: "",
  unit: "",
  parameterFormat: "",
  isRequired: undefined,
});

const isShow = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emit("update:visible", val);
  },
});

const { proxy } = getCurrentInstance();
const { parameter_tyep } = proxy.useDict("parameter_tyep");

const closeModal = () => {
  isShow.value = false;
};

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      add(formState.value).then(() => {
        isShow.value = false;
        emit("completed");
        proxy.$modal.msgSuccess("新增成功");
      });
    }
  });
};

defineExpose({
  closeModal,
  handleSubmit,
  isShow,
});
</script>

 src/views/productionManagement/productionRecords/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,189 @@
<!-- ç”Ÿäº§è®°å½• -->
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="参数编码:">
          <el-input
            v-model="searchForm.code"
            placeholder="请输入"
            clearable
            style="width: 200px;"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="参数项:">
          <el-input
            v-model="searchForm.parameterItem"
            placeholder="请输入"
            clearable
            style="width: 200px;"
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="参数类型:">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择"
            clearable
            style="width: 200px;"
            @change="handleQuery"
          >
            <el-option
              v-for="dict in parameter_tyep"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_list">
      <div style="text-align: right" class="mb10">
        <el-button type="primary" @click="showNewModal">新增</el-button>
      </div>
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :tableLoading="tableLoading"
        @pagination="pagination"
        :total="page.total"
      />
    </div>
    <NewRecord v-if="isShowNewModal" v-model:visible="isShowNewModal" @completed="getList" />
    <EditRecord
      v-if="isShowEditModal"
      v-model:visible="isShowEditModal"
      :record="record"
      @completed="getList"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
import NewRecord from "./New.vue";
import EditRecord from "./Edit.vue";
import { listPage, del } from "@/api/productionManagement/productionRecords.js";

const data = reactive({
  searchForm: {
    code: "",
    parameterItem: "",
    type: "",
  },
});
const { searchForm } = toRefs(data);
const { proxy } = getCurrentInstance();
const { parameter_tyep } = proxy.useDict("parameter_tyep");

const tableColumn = ref([
  { label: "参数编码", prop: "code" },
  { label: "参数项", prop: "parameterItem" },
  {
    label: "参数类型",
    prop: "type",
    formatData: (params) =>
      (parameter_tyep?.value ?? parameter_tyep ?? []).find((d) => String(d.value) === String(params))?.label ?? params,
  },
  { label: "单位", prop: "unit" },
  { label: "参数格式", prop: "parameterFormat" },
  {
    label: "是否必填",
    prop: "isRequired",
    formatData: (params) => (params === '1' ? "是" : "否"),
  },
//   { label: "创建人", prop: "createUser" },
  { label: "创建日期", prop: "createTime" },
//   { label: "更新人", prop: "updateUser" },
  { label: "更新日期", prop: "updateTime" },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 160,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => showEditModal(row),
      },
      {
        name: "删除",
        type: "text",
        clickFun: (row) => handleDeleteRow(row),
      },
    ],
  },
]);

const tableData = ref([]);
const tableLoading = ref(false);
const isShowNewModal = ref(false);
const isShowEditModal = ref(false);
const record = ref({});
const page = reactive({
  current: 1,
  size: 100,
  total: 0,
});

const handleQuery = () => {
  page.current = 1;
  getList();
};

const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};

const getList = () => {
  tableLoading.value = true;
  const params = { ...searchForm.value, ...page };
  listPage(params)
    .then((res) => {
      tableLoading.value = false;
      const data = res.data;
      tableData.value = data?.records ?? (Array.isArray(data) ? data : []);
      page.total = data?.total ?? 0;
    })
    .catch(() => {
      tableLoading.value = false;
    });
};

const showNewModal = () => {
  isShowNewModal.value = true;
};

const showEditModal = (row) => {
  record.value = { ...row };
  isShowEditModal.value = true;
};

const handleDeleteRow = (row) => {
  proxy.$modal
    .confirm(`是否确认删除参数编码为"${row.code}"的数据？`)
    .then(() => del([row.id]))
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
};

onMounted(() => {
  getList();
});
</script>

<style scoped></style>