yos_web/src/bgj/terminalWorkBillModule/modules/taskDetail/components/addTop.vue

<template>
    <div>
        <el-button size="mini" type="text" @click="addBtn" v-if="data" :disabled="disabled">{{
            $t('添 加 子 级 工 序')
        }}</el-button>
        <el-button size="mini" type="primary" @click="addBtn" :disabled="disabled" v-else>{{ $t('添 加') }}</el-button>
        <el-drawer append-to-body :visible.sync="dialogFormVisible" size="70%">
            <div slot="title" style="font-size: 15px">{{ $t('添加工序') }}</div>
            <div class="drawer__panel">
                <el-input
                    style="width: 250px; margin-bottom: 10px"
                    size="small"
                    :placeholder="$t('请输入搜索内容')"
                    clearable
                    @clear="getOrderList((params.content.pageNumber = 1))"
                    v-model="params.content.where.condition"
                    @keyup.enter.native="getOrderList((params.content.pageNumber = 1))"
                ></el-input>
                <selectTable
                    @selectChange="selectChange"
                    v-if="dialogFormVisible"
                    idName="sc_workpresetid"
                    ref="table"
                    v-model="result"
                    :layout="tablecols"
                    :data="orderList"
                    :custom="true"
                    height="500px"
                    @upDateData="upDateData"
                >
                    <template v-slot:customcol="scope">
                        <div
                            v-if="scope.column.columnname == 'fileupload'"
                            :style="
                                scope.column.data.fileupload
                                    ? scope.column.data.fileupload == 1
                                        ? 'color:green'
                                        : 'color:red'
                                    : 'color:#333333'
                            "
                        >
                            {{
                                scope.column.data.fileupload
                                    ? scope.column.data.fileupload == 1
                                        ? $t('非必填')
                                        : $t('必填')
                                    : $t('无')
                            }}
                        </div>
                        <div
                            v-else-if="scope.column.columnname == 'additem'"
                            :style="
                                scope.column.data.additem
                                    ? scope.column.data.additem == 1
                                        ? 'color:green'
                                        : 'color:red'
                                    : 'color:#333333'
                            "
                        >
                            {{
                                scope.column.data.additem
                                    ? scope.column.data.additem == 1
                                        ? $t('非必填')
                                        : $t('必填')
                                    : $t('无')
                            }}
                        </div>
                        <div
                            v-else-if="scope.column.columnname == 'formcheck'"
                            :style="scope.column.data.formcheck == 1 ? 'color:green' : 'color:red'"
                        >
                            {{ scope.column.data.formcheck == 1 ? $t('是') : $t('否') }}
                        </div>
                        <div
                            v-else-if="scope.column.columnname == 'panorama'"
                            :style="
                                scope.column.data.panorama
                                    ? scope.column.data.panorama == 1
                                        ? 'color:green'
                                        : 'color:red'
                                    : 'color:#333333'
                            "
                        >
                            {{
                                scope.column.data.panorama
                                    ? scope.column.data.panorama == 1
                                        ? $t('非必填')
                                        : $t('必填')
                                    : $t('无')
                            }}
                        </div>
                        <div
                            v-else-if="scope.column.columnname == 'passcheck'"
                            :style="
                                scope.column.data.passcheck
                                    ? scope.column.data.passcheck == 1
                                        ? 'color:green'
                                        : 'color:red'
                                    : 'color:#333333'
                            "
                        >
                            {{
                                scope.column.data.passcheck
                                    ? scope.column.data.passcheck == 1
                                        ? $t('非必填')
                                        : $t('必填')
                                    : $t('无')
                            }}
                        </div>
                        <div
                            v-else-if="scope.column.columnname == 'signature'"
                            :style="
                                scope.column.data.signature
                                    ? scope.column.data.signature == 1
                                        ? 'color:green'
                                        : 'color:red'
                                    : 'color:#333333'
                            "
                        >
                            {{
                                scope.column.data.signature
                                    ? scope.column.data.signature == 1
                                        ? $t('非必填')
                                        : $t('必填')
                                    : $t('无')
                            }}
                        </div>
                        <div
                            v-else-if="scope.column.columnname == 'servicenode'"
                            :style="scope.column.data.servicenode == 1 ? 'color:green' : 'color:red'"
                        >
                            {{ scope.column.data.servicenode == 1 ? $t('是') : $t('否') }}
                        </div>
                        <div v-else>
                            {{
                                scope.column.data[[scope.column.columnname]]
                                    ? scope.column.data[[scope.column.columnname]]
                                    : '--'
                            }}
                        </div>
                    </template>
                </selectTable>
                <div class="container normal-panel" style="text-align: right">
                    <el-pagination
                        style="text-align: right"
                        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>
            <div class="fixed__btn__panel">
                <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">{{
                    $t('取 消')
                }}</el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="onSubmit"
                    :disabled="isLength"
                    class="normal-btn-width"
                    >{{ $t('确 定') }}</el-button
                >
            </div>
        </el-drawer>
    </div>
</template>

<script>
import selectTable from '@/components/selectTable/index';
export default {
    name: 'add',
    props: ['data', 'disabled'],
    components: { selectTable },
    data() {
        return {
            result: [],
            selectArr: [],
            isLength: true,
            dialogFormVisible: false,
            orderList: [],
            tablecols: [],
            total: 0,
            params: {
                id: 2026051416494002,
                content: {
                    pageNumber: 1,
                    pageSize: 20,
                    where: {
                        condition: '',
                    },
                },
            },
        };
    },
    created() {},
    watch: {
        dialogFormVisible(val) {
            if (!val) {
                this.$refs.table.allArr = [];
            }
        },
    },
    methods: {
        addBtn() {
            this.dialogFormVisible = true;
            this.getOrderList();
            this.tablecols = this.tool.tabelCol(this.$route.name).serviceWorkItemTable.tablecols;
        },
        async onSubmit() {
            let data = this.$refs.table.allArr.map((item) => {
                console.log('this.data', this.data);
                return {
                    sc_workorder_template_worksid: 0,
                    parentid: this.data ? this.data.sc_workorder_template_worksid : 0,
                    sc_workpresetid: item.sc_workpresetid,
                    sequence: '1',
                };
            });
            let res = await this.$api.requested({
                id: '2026051514394802',
                content: {
                    sc_workorder_templateid: this.$route.query.id,
                    workinfos: data,
                },
            });
            this.tool.showMessage(res, () => {
                this.$emit('onSuccess');
                this.dialogFormVisible = false;
            });
        },
        async getOrderList() {
            let res = await this.$api.requested(this.params);
            console.log(res.data);

            this.orderList = res.data;
            this.total = res.total;
            console.log(res);
        },
        selectChange(data) {
            console.log(data);

            this.selectArr = data;
            this.isLength = data.length < 1;
        },
        upDateData(data) {
            this.selectArr = data;
            this.isLength = data.length < 1;
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.params.content.pageSize = val;
            this.getOrderList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.params.content.pageNumber = val;
            this.getOrderList();
        },
    },
};
</script>

<style scoped>
.dialog-footer {
    margin-top: 0;
}
.el-select {
    width: 100%;
}
</style>