src/mixins/basic-page.js

@@ -1,8 +1,8 @@
 /*
  * @Author: zwq
  * @Date: 2022-08-24 11:19:43
- * @LastEditors: zhp
- * @LastEditTime: 2023-05-16 14:55:04
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-06-30 15:00:20
  * @Description: 
  */
 export default {
@@ -15,7 +15,6 @@ export default {
         statusUrl: '',
         exportURL: ''
       },
-      addOrEditTitle: '',
       tableData: [],
       listQuery: {
         limit: 10,
@@ -23,7 +22,10 @@ export default {
         total: 1,
       },
       dataListLoading: false,
+      addOrEditTitle: '',
       addOrUpdateVisible: false,
+      searchsTitle: '',
+      searchsVisible: false,
     }
   },
   created() {
@@ -71,6 +73,13 @@ export default {
         this.$refs.addOrUpdate.init(id);
       });
     },
+    // 条件搜索
+    searchsHandle() {
+      this.searchsVisible = true;
+      this.$nextTick(() => {
+        this.$refs.searchsRef.init();
+      });
+    },
     cancel(id) {
       this.$refs["popover-" + id].showPopper = false;
     },
@@ -158,13 +167,26 @@ export default {
       this.addOrUpdateVisible = false
       this.addOrEditTitle = ''
     },
+    searchsCancel(){
+      this.$refs.searchsRef.formClear()
+      this.searchsVisible = false
+      this.searchsTitle = ''
+    },
     handleConfirm() {
       this.$refs.addOrUpdate.dataFormSubmit()
     },
+    searchsConfirm(){
+      this.$refs.searchsRef.dataFormSubmit()
+    },
     successSubmit() {
       this.handleCancel()
       this.getDataList()
     },
+    searchsSubmit(obj){
+      this.listQuery = {...this.listQuery,...obj}
+      this.searchsCancel()
+      this.getDataList()
+    },
     // 导出
     exportHandle(name) {
       this.$http

src/views/modules/managementCenter/components/eightDisciplineList-D0.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-06-30 16:23:19
+ * @Description:
+-->
+<template>
+<el-descriptions title="">
+    <el-descriptions-item label="标题">{{ dataInfo.title }}</el-descriptions-item>
+    <el-descriptions-item label="产品">{{ dataInfo.productName }}</el-descriptions-item>
+    <el-descriptions-item label="发生日期">{{ dataInfo.occurrenceDate | timeFormatter }}</el-descriptions-item>
+    <el-descriptions-item label="配套产品/系统">{{ dataInfo.supportProducts }}</el-descriptions-item>
+    <el-descriptions-item label="启动人">{{ dataInfo.userName }}</el-descriptions-item>
+    <el-descriptions-item label="8D类型">{{ eightDisciplineType[dataInfo.eightDisciplineType] }}</el-descriptions-item>
+</el-descriptions>
+</template>
+
+<script>
+import codeFilter from "@/filters/code-filter";
+import { timeFormatter } from "@/filters/code-filter";
+export default {
+  data() {
+    return {
+        dataInfo: '',
+    eightDisciplineType: {
+    1: '客诉问题',
+    2: '重大质量问题',
+    0: '重复发生问题',
+  },
+    }
+  },
+  methods: {
+    init(id) {
+        console.log(codeFilter('eightDisciplineType'))
+      this.$nextTick(() => {
+      this.$http
+        .get(`/code/startEightDiscipline/${id}`)
+        .then(({ data: res }) => {
+          this.dataListLoading = false;
+          if (res.code !== 0) {
+            this.dataInfo = '';
+            return this.$message.error(res.msg);
+          }
+          this.dataInfo = res.data;
+        })
+        .catch(() => {
+        })
+      });
+    },
+  }
+}
+</script>

src/views/modules/managementCenter/components/eightDisciplineList-detail.vue

@@ -0,0 +1,129 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-01-04 10:29:40
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-06-30 16:24:04
+ * @Description: 
+-->
+<template>
+  <el-tabs v-model="activeName"  type="border-card" @tab-click="handleClick">
+    <el-tab-pane label="(D0)启动CAR" name="D0">
+      <tabD0
+        v-show="D0Visible"
+        ref="D0Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D1)初步分析" name="D1">
+      <tabD1
+        v-show="D1Visible"
+        ref="D1Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D2)创建团队" name="D2">
+      <tabD2
+        v-show="D2Visible"
+        ref="D2Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D3)临时处理措施" name="D3">
+      <tabD3
+        v-show="D3Visible"
+        ref="D3Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D4)根本原因分析" name="D4">
+      <tabD4
+        v-show="D4Visible"
+        ref="D4Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D5)纠正措施描述" name="D5">
+      <tabD5
+        v-show="D5Visible"
+        ref="D5Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D6)有效性验证" name="D6">
+      <tabD6
+        v-show="D6Visible"
+        ref="D6Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D7)预防再发生" name="D7">
+      <tabD7
+        v-show="D7Visible"
+        ref="D7Ref"
+        />
+    </el-tab-pane>
+    <el-tab-pane label="(D8)总结与经验分享" name="D8">
+      <tabD8
+        v-show="D8Visible"
+        ref="D8Ref"
+        />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import tabD0 from "./eightDisciplineList-D0"
+import tabD1 from "./eightDisciplineList-D1"
+import tabD2 from "./eightDisciplineList-D2"
+import tabD3 from "./eightDisciplineList-D3"
+import tabD4 from "./eightDisciplineList-D4"
+import tabD5 from "./eightDisciplineList-D5"
+import tabD6 from "./eightDisciplineList-D6"
+import tabD7 from "./eightDisciplineList-D7"
+import tabD8 from "./eightDisciplineList-D8"
+export default {
+  components: {
+    tabD0,tabD1,tabD2,
+    tabD3,tabD4,tabD5,
+    tabD6,tabD7,tabD8,
+  },
+  data() {
+    return {
+      visible: false,
+      activeName: "D0",
+      D0Visible: false,
+      D1Visible: false,
+      D2Visible: false,
+      D3Visible: false,
+      D4Visible: false,
+      D5Visible: false,
+      D6Visible: false,
+      D7Visible: false,
+      D8Visible: false,
+    };
+  },
+  computed: {
+    dataRule() {
+      return {
+        id: ''
+      };
+    },
+  },
+  methods: {
+    init(id) {
+      this.id = id
+      this.visible = true;
+      this.D0Visible = true
+      this.oldTab = 'D0Visible'
+      this.$nextTick(() => {
+          this.$refs.D0Ref.init(this.id);
+      });
+    },
+    handleClick(val) {
+        this[this.oldTab] = false;
+        this[val.name+'Visible'] = true;
+        this.oldTab = val.name+'Visible'
+        this.$nextTick(() => {
+          this.$refs[val.name+'Ref'].init(this.id);
+        });
+    },
+    dataFormSubmit() {
+      this.$emit("refreshDataList");
+    },
+    formClear() {},
+  },
+};
+</script>

src/views/modules/managementCenter/components/searchs.vue

@@ -0,0 +1,150 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-01-04 10:29:40
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-06-30 14:53:49
+ * @Description: 
+-->
+<template>
+  <el-form :model="dataForm" ref="dataForm" label-width="120px">
+    <el-form-item prop="title" :label="$t('code.title')">
+      <el-input v-model="dataForm.title" :placeholder="$t('code.title')" clearable></el-input>
+    </el-form-item>
+    <el-form-item prop="customId" label="客户">
+      <el-select v-model="dataForm.customId" filterable clearable placeholder="请选择客户">
+        <el-option
+          v-for="item in this.urlOptions.optionArr.arr0"
+          :key="item.id"
+          :label="item.customerName"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="productId" label="产品">
+      <el-select v-model="dataForm.productId" filterable clearable placeholder="请选择产品">
+        <el-option
+          v-for="item in this.urlOptions.optionArr.arr1"
+          :key="item.id"
+          :label="item.productName"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="eightDisciplineStatus" label="步骤">
+      <el-select
+        v-model="dataForm.eightDisciplineStatus"
+        filterable
+        clearable
+        placeholder="请选择步骤"
+      >
+        <el-option
+          v-for="item in eightDisciplineStatusArr"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="occurrenceDate" label="发生时间">
+      <el-date-picker
+        v-model="dataForm.occurrenceDate"
+        type="date"
+        :style="{ width: '100%' }"
+        format="yyyy-MM-dd"
+        valueFormat="yyyy-MM-ddTHH:mm:ss"
+        placeholder="选择日期"
+      >
+      </el-date-picker>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import basicAdd from "@/mixins/basic-add";
+
+const eightDisciplineStatusArr = [
+  {
+    name: "D0",
+    id: 0,
+  },
+  {
+    name: "D1",
+    id: 1,
+  },
+  {
+    name: "D2",
+    id: 2,
+  },
+  {
+    name: "D3",
+    id: 3,
+  },
+  {
+    name: "D4",
+    id: 4,
+  },
+  {
+    name: "D5",
+    id: 5,
+  },
+  {
+    name: "D6",
+    id: 6,
+  },
+  {
+    name: "D7",
+    id: 7,
+  },
+  {
+    name: "D8",
+    id: 8,
+  },
+];
+export default {
+  mixins: [basicAdd],
+  data() {
+    return {
+      urlOptions: {
+        optionArrUrl: ["/basic/qmsCustomer/page", "/basic/qmsProduct/page"],
+      },
+      visible: false,
+      eightDisciplineStatusArr,
+      dataForm: {
+        title: "",
+        eightDisciplineStatus: "",
+        occurrenceDate: "",
+        customId: "",
+        productId: "",
+      },
+    };
+  },
+  computed: {
+    dataRule() {
+      return {
+        // paramCode: [
+        //   {
+        //     required: true,
+        //     message: this.$t("validate.required"),
+        //     trigger: "blur",
+        //   },
+        // ],
+      };
+    },
+  },
+  methods: {
+    init() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].resetFields();
+        this.getArr();
+      });
+    },
+    dataFormSubmit() {
+      this.$emit("refreshDataList", this.dataForm);
+    },
+  },
+};
+</script>

src/views/modules/managementCenter/eightDisciplineList.vue

@@ -0,0 +1,189 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__user">
+      <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick">
+        <el-badge :value="5" class="item">
+          <el-button type="primary" size="small" @click="searchsClick">条件搜索</el-button>
+        </el-badge>
+      </search-bar>
+      <base-table
+        :table-props="tableProps"
+        :page="listQuery.page"
+        :limit="listQuery.limit"
+        :table-data="tableData"
+      >
+        <method-btn
+          v-if="tableBtn.length"
+          slot="handleBtn"
+          :width="100"
+          :label="$t('handle')"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+      <pagination
+        :limit.sync="listQuery.limit"
+        :page.sync="listQuery.page"
+        :total="listQuery.total"
+        @pagination="getDataList"
+      />
+      <!-- 弹窗, 条件搜索-->
+      <base-dialog
+        :dialogTitle="searchsTitle"
+        :dialogVisible="searchsVisible"
+        @cancel="searchsCancel"
+        @confirm="searchsConfirm"
+        :before-close="searchsCancel"
+      >
+        <searchs ref="searchsRef" @refreshDataList="searchsSubmit"></searchs>
+      </base-dialog>
+      <!-- 弹窗, 新增 / 修改 -->
+      <base-dialog
+        :dialogTitle="addOrEditTitle"
+        :dialogVisible="addOrUpdateVisible"
+        @cancel="handleCancel"
+        @confirm="handleConfirm"
+        :before-close="handleCancel"
+        width=80%
+      >
+        <add-or-update ref="addOrUpdate" @refreshDataList="successSubmit"></add-or-update>
+      </base-dialog>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import AddOrUpdate from "./components/eightDisciplineList-detail";
+import Searchs from "./components/searchs";
+import basicPage from "@/mixins/basic-page";
+import codeFilter from "@/filters/code-filter";
+import { timeFormatter } from "@/filters/code-filter";
+import i18n from "@/i18n";
+
+const tableProps = [
+  {
+    prop: "title",
+    label: i18n.t("code.title"),
+    align: "center",
+  },
+  {
+    prop: "code",
+    label: i18n.t("code.code"),
+    align: "center",
+  },
+  {
+    prop: "eightDisciplineType",
+    label: i18n.t("code.eightDisciplineType"),
+    align: "center",
+    filter: codeFilter("eightDisciplineType"),
+  },
+  {
+    prop: "occurrenceDate",
+    label: i18n.t("code.occurrenceDate"),
+    align: "center",
+    filter: timeFormatter,
+  },
+  {
+    prop: "description",
+    label: i18n.t("code.description"),
+    align: "center",
+  },
+  {
+    prop: "examineStatus",
+    label: i18n.t("code.examineStatus"),
+    align: "center",
+    filter: codeFilter("examineStatus"),
+  },
+];
+const tableBtn = [
+  {
+    type: "delete",
+    btnName: i18n.t("delete"),
+  },
+  {
+    type: "detail",
+    btnName: "详情",
+  },
+];
+
+export default {
+  mixins: [basicPage],
+  data() {
+    return {
+      urlOptions: {
+        getDataListURL: "/code/startEightDiscipline/eight/page",
+        deleteURL: "/code/startEightDiscipline",
+      },
+      tableProps,
+      tableBtn,
+      tableData: [],
+      formConfig: [
+        {
+          type: "button",
+          btnName: "搜索",
+          name: "search",
+          color: "primary",
+        },
+        {
+          type: "button",
+          btnName: i18n.t("export"),
+          name: "export",
+          color: "primary",
+          plain: true,
+        },
+      ],
+    };
+  },
+  components: {
+    AddOrUpdate,
+    Searchs,
+  },
+  methods: {
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true;
+      this.$http
+        .post(this.urlOptions.getDataListURL, this.listQuery)
+        .then(({ data: res }) => {
+          this.dataListLoading = false;
+          if (res.code !== 0) {
+            this.tableData = [];
+            this.listQuery.total = 0;
+            return this.$message.error(res.msg);
+          }
+          this.tableData = res.data.list;
+          this.listQuery.total = res.data.total;
+        })
+        .catch(() => {
+          this.dataListLoading = false;
+        });
+    },
+    //search-bar点击
+    searchsClick() {
+      this.searchsTitle = "条件搜索";
+      this.searchsHandle();
+    },
+    buttonClick(val) {
+      switch (val.btnName) {
+        case "search":
+          this.listQuery = {};
+          this.listQuery.page = 1;
+          this.listQuery.limit = 10;
+          this.listQuery.total = 1;
+          this.getDataList();
+          break;
+        case "export":
+          this.exportHandle("工厂管理");
+          break;
+        default:
+          console.log(val);
+      }
+    },
+    otherMethods(val) {
+      this.addOrEditTitle = "详情";
+      this.addOrUpdateVisible = true;
+      this.addOrUpdateHandle(val.data.id);
+    },
+  },
+};
+</script>