qingban-SPC/src/views/analysis/spc/index.vue

<template>
  <div class="container">
    <div class="header" v-show="!addStatus && !editStatus">
      <Search :searchOptions="searchForm" ref="searchRef" />
    </div>
    <div class="table" v-if="!addStatus && !editStatus">
      <el-button
        type="primary"
        size="small"
        class="btn"
        style="margin-bottom: 10px"
        @click="toAdd"
        >新增</el-button
      >
      <el-table
        :data="tableData"
        border
        :style="{ height: maxHeight - 80 + 'px' }"
      >
        <el-table-column prop="taskCode" label="任务编号" />
        <el-table-column prop="prodtModel" label="产品型号" />
        <el-table-column prop="operationName" label="工序名称" />
        <el-table-column prop="source" label="采集数据源" />
        <el-table-column prop="param" label="控制参数" />
        <el-table-column prop="chart" label="控制图" />
        <el-table-column prop="address" label="预警规则">
          <template #default="{ row }">
            <el-button
              type="primary"
              class="btn"
              style="height: 25px"
              link
              @click="toRuler(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="created" label="创建时间" />
        <el-table-column
          align="center"
          width="160"
          prop=""
          label="操作"
          id="opear"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              class="btn"
              style="height: 25px"
              @click="toEdit(row)"
              link
              >编辑</el-button
            >
            <el-button
              type="info"
              class="btn"
              style="height: 25px"
              link
              @click="toDelete(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="currentOption.total"
        :page="currentOption.page"
        :limit="currentOption.limit"
        :pageSizes="currentOption.pageSizes"
        v-model:page="currentOption.page"
        @pagination="getData"
      />
    </div>
    <div v-if="addStatus || editStatus" class="formView">
      <div class="formTitle">
        {{ addStatus ? "新增任务" : "编辑任务" }}
      </div>
      <el-scrollbar style="height: calc(100% - 60px)">
        <el-form
          ref="ruleFormRef"
          :model="formData"
          :rules="rules"
          label-width="auto"
          class="formStyle"
        >
          <el-form-item label="产品型号" prop="Index1">
            <el-select v-model="formData.Index1">
              <el-option
                v-for="(item, index) in opInfoData"
                :key="index"
                :label="item.prodtModel"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="工序名称" prop="Index2">
            <el-select v-model="formData.Index2">
              <el-option
                v-for="(item, index) in opInfoData2"
                :key="index"
                :label="item.name"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="采集数据来源" prop="source">
            <el-select v-model="formData.source">
              <el-option label="自动" value="自动" />
              <el-option label="手动" value="手动" />
            </el-select>
          </el-form-item>
          <el-form-item label="控制参数" prop="param">
            <el-input v-model="formData.param" />
          </el-form-item>
          <el-form-item label="控制图" prop="chart">
            <el-input :disabled="true" v-model="formData.chart" />
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: space-evenly">
          <el-button
            type="primary"
            size="small"
            style="margin-top: 10px"
            class="btn"
            @click="toSubmit"
            >提交</el-button
          >
          <el-button
            type="info"
            size="small"
            style="margin-top: 10px"
            class="btn"
            @click="toCancel"
            >取消</el-button
          >
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import Search from "@/components/Search/index.vue";
import { useSpcStore } from "@/store";
import {
  getTableData,
  getBaseData,
  add,
  updateData,
  deleteData,
} from "@/api/spc";
defineOptions({
  name: "SPCrules",
});
const store = useSpcStore();
const addStatus = ref(false);
const editStatus = ref(false);
const router = useRouter();
const formData = ref({
  source: "手动",
  chart: "X-R",
});
const currentOption = reactive({
  total: 0,
  page: 1,
  limit: 10,
  pageSizes: [10, 20, 40],
});
const showStatus = ref(true);
const tableData = ref([]);
const searchRef = ref(null);
const searchForm = [
  {
    label: "创建时间",
    prop: "created",
    type: "daterange",
  },
  {
    label: "任务编号",
    prop: "taskCode",
    type: "input",
  },
  {
    label: "产品型号",
    prop: "prodtModel",
    type: "input",
  },
  // {
  //   label: "工序名称",
  //   prop: "sss",
  //   type: "select",
  // },
];
const maxHeight = ref(null);
const setHeight = () => {
  maxHeight.value = document.querySelector(".table").clientHeight;
};
const opInfoData2 = computed(() => {
  if (formData.value.Index1 != null) {
    return opInfoData.value[formData.value.Index1].operations;
  } else {
    return [];
  }
});
const toCancel = () => {
  reset();
};
const toRuler = (row) => {
  store.spcTaskObj = row;
  router.push({ name: "SPCrules" });
};
const getData = async (obj) => {
  if (obj) {
    currentOption.page = obj.page;
    currentOption.limit = obj.limit;
  }
  const { data, code } = await getTableData({
    ...searchRef.value.searchForm,
    pageNo: currentOption.page,
    pageSize: currentOption.limit,
  });
  if (code == "200") {
    tableData.value = data.records;
    currentOption.total = data.totalCount;
  }
};
const ruleFormRef = ref(null);

const rules = {
  Index1: [
    {
      required: true,
      trigger: "change",
      message: "请选择产品型号",
    },
  ],
  Index2: [
    {
      required: true,
      message: "请选择工序名称",
      trigger: "change",
    },
  ],
  source: [
    {
      required: true,

      trigger: "change",
    },
  ],
  chart: [
    {
      required: true,

      trigger: "change",
    },
  ],
  param: [
    {
      required: true,

      trigger: "change",
    },
  ],
  unit: [
    {
      required: true,

      trigger: "change",
    },
  ],
};
const opInfoData = ref([]);
const toAdd = () => {
  addStatus.value = true;
};
const setEditFormData = (row) => {
  opInfoData.value.forEach((item, index) => {
    if (item.prodtCode == row.prodtCode) {
      formData.value.Index1 = index;
    }
  });
  opInfoData.value[formData.value.Index1].operations.forEach((item, index) => {
    if (item.code == row.operationCode) {
      formData.value.Index2 = index;
    }
  });
};
const toEdit = (row) => {
  formData.value = row;
  //设置index1 index2
  setEditFormData(row);
  editStatus.value = true;
};
const toDelete = async (id) => {
  const { code } = await deleteData({ id });
  if (code == "200") {
    ElMessage.success("操作成功");
    getData();
  }
};
const reset = () => {
  formData.value = {
    source: "手动",
    chart: "X-R",
  };
  addStatus.value = false;
  editStatus.value = false;
};
const toSubmit = async () => {
  if (addStatus.value) {
    await ruleFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        const { data, code } = await add({
          chart: formData.value.chart,
          operationCode:
            opInfoData.value[formData.value.Index1].operations[
              formData.value.Index2
            ].code,
          operationName:
            opInfoData.value[formData.value.Index1].operations[
              formData.value.Index2
            ].name,

          prodtCode: opInfoData.value[formData.value.Index1].prodtCode,
          prodtModel: opInfoData.value[formData.value.Index1].prodtModel,
          prodtName: opInfoData.value[formData.value.Index1].prodtName,
          unit: opInfoData.value[formData.value.Index1].unit,
          param: formData.value.param,

          source: formData.value.source,
        });
        if (code == "200") {
          ElMessage.success("添加成功！");
          reset();
          getData();
        }
      } else {
        ElMessage.error("请检查表单信息");
      }
    });
  } else {
    await ruleFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        const { data, code } = await updateData({
          ...formData.value,
          operationCode:
            opInfoData.value[formData.value.Index1].operations[
              formData.value.Index2
            ].code,
          operationName:
            opInfoData.value[formData.value.Index1].operations[
              formData.value.Index2
            ].name,
          prodtCode: opInfoData.value[formData.value.Index1].prodtCode,
          prodtModel: opInfoData.value[formData.value.Index1].prodtModel,
          prodtName: opInfoData.value[formData.value.Index1].prodtName,
          unit: opInfoData.value[formData.value.Index1].unit,
        });
        if (code == "200") {
          ElMessage.success("修改成功！");
          reset();
          getData();
        }
      } else {
        ElMessage.error("请检查表单信息");
      }
    });
  }
};
const getBaseDatas = async () => {
  const { data, code } = await getBaseData();
  opInfoData.value = data;
};
onMounted(() => {
  setHeight();
  getBaseDatas();
  getData();
});
</script>

<style scoped lang="scss">
.container {
  background-color: white;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: auto;
  }
  .table {
    flex: 1;
    padding-bottom: 20px;
  }
  .formView {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .formTitle {
      text-align: center;
      font-size: 20px;
      margin-bottom: 20px;
    }
    .formStyle {
      width: 400px;
    }
  }
}
</style>