服务预约单 详情-关联工单tab

src/bgj/serviceAppointment/modules/detail.vue

@@ -43,7 +43,9 @@
                     :detailInfo="detailInfo"
                 ></base-info>
             </div>
-            <div slot="slot1"></div>
+            <div slot="slot1">
+                <linkedWork> </linkedWork>
+            </div>
         </basicDetails>
     </div>
 </template>
@@ -52,6 +54,7 @@
 import BaseInfo from "@/bgj/headquartersServiceMaterial/modules/baseInfo";
 import changeBill from "./changeBill";
 import assignAgent from "./assignAgent";
+import linkedWork from "./linkedWork";
 export default {
     name: "detail",
     data() {
@@ -62,7 +65,7 @@ export default {
             btnLoading: false,
         };
     },
-    components: { BaseInfo, changeBill, assignAgent },
+    components: { BaseInfo, changeBill, assignAgent, linkedWork },
     methods: {
         async queryMainData() {
             const res = await this.$api.requested({

src/bgj/serviceAppointment/modules/linkedWork.vue

@@ -0,0 +1,171 @@
+
+<template>
+    <div>
+        <div style="display: flex; align-items: center">
+            <el-input
+                :placeholder="$t('请输入搜索内容')"
+                suffix-icon="el-icon-search"
+                v-model="params.content.where.condition"
+                style="width: 200px"
+                size="mini"
+                class="input-with-select inline-16"
+                @keyup.native.enter="listData((params.content.pageNumber = 1))"
+                @clear="clearData"
+                clearable
+            >
+            </el-input>
+            <slot name="addProduct"></slot>
+        </div>
+        <div style="margin-top: 15px">
+            <tableLayout
+                :layout="tablecols"
+                :data="list"
+                :opwidth="200"
+                :custom="true"
+                :width="false"
+                :height="tableHieght"
+                fixedName="operation"
+            >
+                <template v-slot:customcol="scope">
+                    <div v-if="scope.column.columnname == 'billno'">
+                        <span
+                            style="color: #3874f6; cursor: pointer"
+                            @click="goWork(scope.column.data)"
+                        >
+                            {{ scope.column.data.billno }}
+                        </span>
+                    </div>
+                    <div v-else-if="scope.column.columnname == 'status'">
+                        <span
+                            :style="
+                                tool.getStatusColor(
+                                    scope.column.data[[scope.column.columnname]]
+                                )
+                            "
+                            >{{
+                                $t(scope.column.data[[scope.column.columnname]])
+                            }}</span
+                        >
+                    </div>
+                    <div v-else-if="scope.column.columnname == 'city'">
+                        <span>
+                            {{ $t(scope.column.data.province)
+                            }}{{ $t(scope.column.data.city)
+                            }}{{ $t(scope.column.data.county) }}
+                        </span>
+                    </div>
+                    <div v-else-if="scope.column.columnname == 'progress'">
+                        <div style="display: flex; align-items: center">
+                            <el-progress
+                                status="success"
+                                :percentage="
+                                    Math.round(
+                                        (scope.column.data.progress_now /
+                                            scope.column.data.progress_total) *
+                                            100
+                                    )
+                                "
+                                :show-text="false"
+                                style="flex: 1"
+                            >
+                            </el-progress>
+                            <span style="margin-left: 10px">
+                                {{ scope.column.data.progress_now }}/{{
+                                    scope.column.data.progress_total
+                                }}
+                            </span>
+                        </div>
+                    </div>
+                    <div v-else>
+                        {{
+                            scope.column.data[[scope.column.columnname]]
+                                ? $t(
+                                      scope.column.data[
+                                          [scope.column.columnname]
+                                      ]
+                                  )
+                                : "--"
+                        }}
+                    </div>
+                </template>
+            </tableLayout>
+        </div>
+        <div style="margin-top: 16px; text-align: right">
+            <el-pagination
+                background
+                small
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="params.content.pageNumber"
+                :page-size="params.content.pageSize"
+                layout="total, prev, pager, next, jumper"
+                :total="total"
+            >
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ["data"],
+    data() {
+        return {
+            tableHieght: "calc(100vh - 380px)",
+            tablecols: [],
+            list: [],
+            total: 0,
+            params: {
+                id: 2026052214171102,
+                version: 1,
+                content: {
+                    sc_serviceformid: "",
+                    pageNumber: 1,
+                    pageSize: 20,
+                    where: {
+                        condition: "",
+                    },
+                },
+            },
+            options: [],
+        };
+    },
+    methods: {
+        goWork(scope) {
+            console.log("可跳转至【服务工单】对应数据详情页", scope);
+        },
+        async listData() {
+            this.params.content.sc_serviceformid = this.$route.query.id;
+            const res = await this.$api.requested(this.params);
+            this.list = res.data;
+            this.total = res.total;
+            console.log(this.list);
+        },
+        handleSizeChange(val) {
+            // console.log(`每页 ${val} 条`);
+            this.params.content.pageSize = val;
+            this.listData();
+        },
+        handleCurrentChange(val) {
+            // console.log(`当前页: ${val}`);
+            this.params.content.pageNumber = val;
+            this.listData();
+        },
+        clearData() {
+            this.listData();
+        },
+        queryClick() {
+            this.listData();
+        },
+    },
+    created() {
+        this.listData();
+        console.log(this.$route.name);
+        this.tablecols = this.tool.tabelCol(
+            this.$route.name
+        ).linkedWorkOrderTable.tablecols;
+    },
+};
+</script>
+<style scoped>
+</style>