shengtai_web/src/pages/srm/components/WorkingRecords.vue

<!--
 * @Author: PoJun
 * @Date: 2023-12-22 15:47:43
 * @LastEditors: PoJun
 * @LastEditTime: 2023-12-22 16:42:49
 * @Message: Nothing
-->
<template>
    <CommonDrawer
        title="合作记录"
        v-model="visible"
        :width="720"
        @onClose="onClose"
        :btnLoading="btnLoading"
        :showConfirm="false"
    >
        <CommonTable
            :showCheckbox="true"
            :showSeq="false"
            ref="recordsTable"
            :titles="titles"
            :optButton="optButton"
            @optClick="optClick"
            url="/srmCooperates/page"
            :extra="{ supplierId: detailId }"
        >
            <template slot="extraBtns">
                <a-button type="primary" @click="optClick(null, 'new')">新增</a-button>
                <a-button type="danger" ghost @click="deleteBatch">删除</a-button>
            </template>

            <template #delete="{ row }">
                <a-popconfirm placement="topRight" @confirm="deleteItem(row)">
                    <span slot="title">确定删除当前记录吗?</span>
                    <a-button type="link">删除</a-button>
                </a-popconfirm>
            </template>
        </CommonTable>

        <a-modal v-model="showModal" :zIndex="1002" title="编辑记录" ok-text="确认" cancel-text="取消" @ok="hideModal">
            <a-form-model ref="authForm" :model="form" :rules="rules">
                <a-form-model-item label="合作内容" prop="content">
                    <a-input v-model="form.content" placeholder="请输入..." />
                </a-form-model-item>
                <a-form-model-item label="时间" prop="time">
                    <a-date-picker valueFormat="YYYY-MM-DD" v-model="form.time" style="width: 100%" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </CommonDrawer>
</template>

<script>
import CommonDrawer from "@/components/table/CommonDrawer.vue";
import CommonTable from "@/components/table/CommonTable.vue";
import { addCooperates, updateCooperates, deleteCooperates, batchDeleteCooperates } from "@/api/index.js";
export default {
    name: "SupplierDetail",
    components: { CommonDrawer, CommonTable },
    props: {
        detailId: {
            type: String,
            default: "",
        },
        detailTitle: {
            type: String,
            default: "详情",
        },
    },
    data() {
        return {
            btnLoading: false,
            visible: true,
            showModal: false,
            form: {
                time: null,
                content: "",
                supplierId: this.detailId,
            },
            rules: {
                time: [{ required: true, message: "必填项不能为空", trigger: ["change", "blur"] }],
                content: [{ required: true, message: "必填项不能为空", trigger: ["change", "blur"] }],
            },
            optButton: [
                {
                    id: "edit",
                    name: "编辑",
                },
                {
                    id: "delete",
                    name: "删除",
                },
            ],
            titles: [
                {
                    field: "content",
                    title: "内容",
                    width: 350,
                    fixed: true,
                },
                {
                    field: "time",
                    title: "时间",
                    width: 120,
                },
            ],
            detaiType: "",
        };
    },
    methods: {
        // 列操作
        optClick(row, type) {
            this.detaiType = type;
            this.showModal = true;
            this.form.content = row?.content;
            this.form.time = row?.time;
        },
        onClose() {
            setTimeout(() => {
                this.$emit("close");
            }, 200);
        },
        deleteItem({ id }) {
            deleteCooperates(id).then(() => {
                this.$refs.recordsTable.refresh();
            });
        },
        // 批量删除
        deleteBatch() {
            const list = this.$refs.recordsTable.getCheckboxRecords();
            if (list.length > 0) {
                const ids = list.map(item => item.id);
                this.$confirm({
                    title: "数据删除无法复原，确认删除？",
                    onOk: () => {
                        batchDeleteCooperates(ids).then(() => {
                            this.$refs.recordsTable.refresh();
                        });
                    },
                });
            } else {
                this.$message.warning("请先选择数据！");
            }
        },
        hideModal() {
            this.$refs.authForm.validate(isValid => {
                if (isValid) {
                    const doAjax =
                        this.detaiType == "new" ? addCooperates(this.form) : updateCooperates(this.form, this.detailId);
                    doAjax.then(() => {
                        this.$refs.recordsTable.refresh();
                        this.showModal = false;
                    });
                }
            });
        },
    },
    created() {},
};
</script>

<style lang="less" scoped></style>