const branchUnionUserManage = {
    template:
        /*language=HTML*/
        `
            <div>
                <el-card shadow="never" style="border: 1px solid var(--border-color-lighter); margin-top: 10px">
                    <el-row type="flex" style="column-gap: 10px">
                        <el-input
                            placeholder="请输入内容"
                            size="small"
                            style="width: 400px"
                            clearable
                            v-model="pageForm.searchKeyword"
                            @keyup.enter.native="doSearch"
                        >
                            <el-select v-model="pageForm.searchName" slot="prepend" size="small" placeholder="查询类型"
                                       style="width: 80px !important;">
                                <el-option label="角色" value="roleName"></el-option>
                                <el-option label="姓名" value="username"></el-option>
                                <el-option label="工号" value="loginname"></el-option>
                            </el-select>
                        </el-input>
                        <el-button type="primary" size="small" icon="el-icon-search" @click="doSearch"></el-button>
                        <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left: auto"
                                   @click="openAdd" v-if="$auth.hasPermission('sys.manager.union.branchOfficer')">添加
                        </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 size="small">
	                    <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="roleName" label="职务"></el-table-column>
                        <el-table-column prop="taskName" label="当前状态"></el-table-column>
                        <el-table-column label="操作" width="100px"
                                         v-if="$auth.hasPermission('sys.manager.union.branchOfficer')">
                            <template scope="scope">
                                <el-button size="mini" type="danger" icon="el-icon-delete"
                                           @click="doDelete(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-dialog title="添加" :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false">
                    <el-form :model="formData" ref="form" size="small" label-width="80px">
                        <el-form-item prop="roleCode" label="角色">
                            <dict-select v-model="formData.roleCode" code="BRANCH_UNION_ROLES" placeholder="请选择角色"></dict-select>
                        </el-form-item>
                        <el-form-item prop="userId" label="人员">
                            <user-select
                                v-model="formData.userId"
                                style="width: 100%"
                                api="/platform/sys/union/listUnion"
                                :api_params="{ unionId: union_id }"
                                :option_label_func="
                                    (item) => {
                                        return item.username + item.loginname + '(' + item.unitName + ')'
                                    }
                                "
                            ></user-select>
                        </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],
    props: {
        union_id: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            pageForm: {
                searchName: "username"
            },
            dialogFormVisible: false,
            formData: {}
        }
    },
    watch: {
        union_id(val) {
            this.doSearch()
        }
    },
    methods: {
        openAdd() {
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.formData = {}
            })
        },
        doSubmit() {
            this.$axios.post("/platform/sys/union/insertBranchUnionUserRole", {
                ...this.formData,
                unionId: this.union_id
            }).then((res) => {
                if (res.code === 0) {
                    this.dialogFormVisible = false
                    this.$message.success(res.msg)
                    this.doSearch()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        doDelete({ userId, roleCode }) {
            this.$confirm("您确定要删除吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "info"
            }).then((res) => {
                $.post("/platform/sys/union/deleteBranchUnionUserRole", {
                    userId,
                    roleCode,
                    unionId: this.union_id
                }).then((res) => {
                    if (res.code === 0) {
                        this.$message.success(res.msg)
                        this.doSearch()
                    }
                })
            })
        },
        pageData() {
            $.get("/platform/sys/union/branchUnionUserPageData", {
                ...this.pageForm,
                unionId: this.union_id
            }).then((res) => {
                if (res.code === 0) {
                    this.tableData = res.data
                }
            })
        }
    },
    created() {
        this.pageData()
    },
    style: /*language=CSS*/ `
        /deep/ .el-select {
            width: 100% !important;
        }
    `
}