Arbitrate-Frontend/src/views/officialSeal/components/sealManage.vue

<template>
    <div>
        <el-dialog title="公章列表" :visible="sealVisable" @close="cancel" width="800px" center :distroy-on-close="true">
            <el-table v-loading="loading" :data="dataList" style="width: 100%">
                <el-table-column label="序号" type="index" align="center">
                    <template slot-scope="scope">
                        <span>{{
                            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="印章名称" align="center" prop="sealName"
                    :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="印章图片" align="center" prop="annexPath">
                    <template slot-scope="scope">
                        <el-image style="width: 40px; height: 40px;" :src="imgUrl + scope.row.annexPath"
                            :preview-src-list="[imgUrl + scope.row.annexPath]">
                        </el-image>
                        <!-- <span>{{ imgUrl + scope.row.annexPath }}</span> -->
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" align="center" prop="sealStatus">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.isUse == 1">已启用</el-tag>
                        <el-tag type="info"
                            v-if="(scope.row.isUse == 0 || scope.row.isUse == null) && scope.row.sealStatus !== 0">未启用</el-tag>
                        <el-tag type="danger" v-if="scope.row.sealStatus == 0">审核中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="isUseChange(scope.row.id, 1)" type="text" icon="el-icon-thumb"
                            v-if="(scope.row.isUse == 0 || scope.row.isUse == null) && scope.row.sealStatus !== 0">启用</el-button>
                        <el-button size="mini" @click="isUseChange(scope.row.id, 0)" type="text" icon="el-icon-thumb"
                            v-if="scope.row.isUse == 1">禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="sealListFn(queryParams)" />
        </el-dialog>
    </div>
</template>
<script>
import {
    sealList,
    updateSealLockStatus
} from "@/api/officialSeal/officialSeal.js";
export default {
    props: ["sealVisable", "sealData"],
    data() {
        return {
            loading: false,
            srcList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            dataList: [

            ],
            total: 0,
            imgUrl: ""
        };
    },
    watch: {
        sealVisable(val) {
            if (val) {
                this.queryParams.id = this.sealData.id;
                this.sealListFn(this.queryParams)
            }
        }
    },
    created() {
        this.UploadUrl()
    },
    methods: {
        UploadUrl() {
            this.imgUrl = window.location.origin + '/API';
        },
        // 查询列表数据
        sealListFn(data) {
            this.loading = true;
            sealList(data).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
                this.loading = false;
            })
        },
        // 更新公章状态
        updateSealLockStatusFn(data) {
            updateSealLockStatus(data).then(res => {
                this.$message.success('更新状态成功');
                this.sealListFn(this.queryParams);
            })
        },
        // 启用或者禁用公章
        isUseChange(id, type) {
            let params = {
                id: id,
                isUse: type
            }
            this.$modal
                .confirm("是否更改状态")
                .then((res) => {
                    this.updateSealLockStatusFn(params);
                })
        },
        cancel() {
            this.$emit("cancelSeal");
        },

    },
};
</script>
  
<style lang="scss" scoped></style>