const branchUnionCommitteeMemberManage = {
    template: /*language=HTML*/ `
        <div>
            <el-card shadow="never" style="border: 1px solid var(--border-color-lighter); margin-top: 10px">
                <el-row :gutter="10" type="flex">
                    <el-select placeholder="请选择届次" v-model="pageForm.sessionId" style="width: 15%"
                               size="small">
                        <el-option v-for="item in sessionOptions" :label="item.fullName" :value="item.id"
                                   :key="item.id"></el-option>
                    </el-select>
                    <el-input placeholder="请输入姓名或工号" clearable size="small"
                              style="width: 300px;margin-left: 10px;"
                              v-model="pageForm.searchKeyword"></el-input>

                    <el-button type="primary" class="ml5" size="small" icon="el-icon-search"
                               @click="doSearch"></el-button>
                    <el-button @click="openAdd" icon="ti-plus" type="primary" size="small" style="margin-left: auto">
                        添加委员
                    </el-button>
                    <el-button @click="deleteRole" icon="el-icon-delete" type="danger" size="small" style="margin-left: 10px">
                        删除当前届次委员角色
                    </el-button>
                </el-row>
            </el-card>

            <el-card shadow="never" style="border: 1px solid var(--border-color-lighter); margin-top: 10px">
                <el-table :data="tableData" border>
                    <el-table-column label="序号" type="index" width="50" :index="indexMethod"></el-table-column>
                    <el-table-column prop="loginName" label="工号"></el-table-column>
                    <el-table-column prop="userName" label="姓名"></el-table-column>
<!--                    <el-table-column prop="mobile" label="联系方式"></el-table-column>-->
                    <el-table-column prop="position" label="职务"></el-table-column>
                    <el-table-column prop="sessionName" label="届次"></el-table-column>
                    <el-table-column label="操作" width="100px">
                        <template scope="scope">
                            <el-button size="mini" type="danger" icon="el-icon-delete"
                                       @click="doDelete(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row class="el-pagination-container mt20">
                    <el-pagination
                            @size-change="pageSizeChange"
                            @current-change="pageNumberChange"
                            :current-page="pageForm.pageNumber"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="pageForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageForm.totalCount"
                    ></el-pagination>
                </el-row>
            </el-card>

            <el-dialog title="添加" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false">
                <el-form :model="formData" ref="formRef" size="small" label-width="80px" :rules="formRules">
                    <el-form-item prop="sessionId" label="届次">
                        <el-select placeholder="请选择届次" v-model="formData.sessionId" clearable style="width: 100%">
                            <el-option v-for="item in sessionOptions" :label="item.fullName" :value="item.id"
                                       :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="userId" label="人员">
                        <user-select
                                v-model="formData.userId"
                                style="width: 100%"
                                api="/platform/sys/committeeMember/listUserSelect"
                                :api_params="{ sessionId: pageForm.sessionId }"
                                :option_label_func="
                            (item) => {
                                return item.username + item.loginname + '(' + item.unitName + ')'
                            }
                        "
                        ></user-select>
                    </el-form-item>
                    <el-form-item prop="position" label="职务">
                        <el-input v-model="formData.position" placeholder="请输入职务"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    `,
    mixins: [initTableMixins],
    data() {
        return {
            dialogFormVisible: false,
            formData: {},
            formRules: {
                sessionId: [{required: true, message: "必填", trigger: ["change", "blur"]}],
                userId: [{required: true, message: "必填", trigger: ["change", "blur"]}],
            },
            sessionOptions: []
        }
    },
    methods: {
        listSession() {
            this.$axios.post("/platform/teacherCongress/common/listSession").then((res) => {
                if (res.code === 0) {
                    this.sessionOptions = res.data
                    if (this.sessionOptions.length > 0) {
                        this.$set(this.pageForm, "sessionId", this.sessionOptions[0].id)
                        this.pageData()
                    }
                }
            })
        },
        pageData() {
            $.get("/platform/sys/committeeMember/pageData", this.pageForm).then((res) => {
                this.tableData = res.data.list
                this.pageForm.totalCount = res.data.totalCount
            })
        },
        openAdd() {
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.formData = {}
            })
        },
        doSubmit() {
            this.$refs.formRef.validate((valid) => {
                if (!valid) return
                const session = this.sessionOptions.find(item => item.id === this.formData.sessionId)
                this.formData.sessionName = session.fullName
                $.post("/platform/sys/committeeMember/insert", this.formData).then((res) => {
                    this.dialogFormVisible = false
                    this.$message.success(res.msg)
                    this.pageData()
                })
            })
        },
        doDelete(id) {
            this.$confirm("您确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
            }).then(() => {
                $.post("/platform/sys/committeeMember/delete", {id}).then((res) => {
                    this.$message.success(res.msg)
                    this.pageData()
                })
            })
        },
        deleteRole() {
            this.$confirm("您当前操作委员信息不会删除，只会删除当前届次委员的角色，确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
            }).then(() => {
                $.post("/platform/sys/committeeMember/deleteRole", {sessionId:this.pageForm.sessionId}).then((res) => {
                    this.$message.success(res.msg)
                    this.pageData()
                })
            })
        }
    },
    created() {
        this.listSession()

    }
}