<template>
    <!-- 类型管理 -->
    <div class="app-container" id="toolsType">
        <el-row :gutter="20">
            <!--树数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input
                        v-model="typeName"
                        placeholder="请输入类型名称"
                        clearable
                        maxlength="50"
                        size="small"
                        prefix-icon="el-icon-search"
                        style="margin-bottom: 20px"
                    />
                </div>
                <div class="head-container" style>
                    <el-tree
                        style="height: 700px; overflow: scroll"
                        :data="treeOptions"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :filter-node-method="filterNode"
                        ref="tree"
                        node-key="id"
                        default-expand-all
                        highlight-current
                        @node-click="handleNodeClick"
                    />
                </div>
            </el-col>
            <!--用户数据-->
            <el-col :span="20" :xs="24">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    v-show="showSearch"
                    label-width="68px"
                >
                    <el-form-item label="关键字" prop="typeName">
                        <el-input
                            v-model="queryParams.typeName"
                            placeholder="请输入关键字"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >查询</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAdd"
                            v-hasPermi="['machinery:type:add']"
                            >新增</el-button
                        >
                    </el-col>
                    <!-- <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出
            </el-button>
          </el-col>-->
                    <right-toolbar
                        :showSearch.sync="showSearch"
                        @queryTable="getList"
                    ></right-toolbar>
                </el-row>

                <el-table
                    v-loading="loading"
                    :data="typeList"
                    border
                    @selection-change="handleSelectionChange"
                >
                    <!-- <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                    /> -->
                    <el-table-column
                        label="名称"
                        align="center"
                        key="typeName"
                        prop="typeName"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="计量单位"
                        align="center"
                        key="unitName"
                        prop="unitName"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="内部租赁价"
                        align="center"
                        key="leasePrice"
                        prop="leasePrice"
                        show-overflow-tooltip
                        width="100"
                    />
                    <el-table-column
                        label="原值"
                        align="center"
                        key="buyPrice"
                        prop="buyPrice"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="丢失赔偿"
                        align="center"
                        key="payPrice"
                        prop="payPrice"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="库管员"
                        align="center"
                        key="keeperUserName"
                        prop="keeperUserName"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="管理模式"
                        align="center"
                        key="manageType"
                        prop="manageType"
                    >
                        <template slot-scope="{ row }">
                            <el-tag size="mini" v-if="row.manageType == '0'">
                                编码管理
                            </el-tag>
                            <el-tag
                                size="mini"
                                type="success"
                                v-if="row.manageType == '1'"
                            >
                                数量管理
                            </el-tag>
                            <el-tag
                                size="mini"
                                type="warning"
                                v-if="row.manageType == '2'"
                            >
                                成套管理
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="图片"
                        align="center"
                        key="photoName"
                        prop="photoName"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <span
                                @click="openImg(scope.row.photoUrl)"
                                style="color: #02a7f0; cursor: pointer"
                                >{{ scope.row.photoName }}</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="文档资料"
                        align="center"
                        key="documentName"
                        prop="documentName"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            <a
                                :href="uploadUrl + scope.row.documentUrl"
                                style="color: #02a7f0; cursor: pointer"
                                :download="scope.row.documentName"
                            >
                                {{ scope.row.documentName }}
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="资产属性"
                        align="center"
                        key="propName"
                        prop="propName"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="厂家规格型号"
                        align="center"
                        key="facModel"
                        prop="facModel"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        label="备注信息"
                        align="center"
                        key="remark"
                        prop="remark"
                        show-overflow-tooltip
                    />

                    <el-table-column label="操作" align="center" width="180">
                        <template
                            slot-scope="scope"
                            v-if="scope.row.typeId !== 1"
                        >
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleConfig(scope.row)"
                                v-hasPermi="['machinery:type:config']"
                            >
                                配置
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['machinery:type:edit']"
                            >
                                修改
                            </el-button>
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['machinery:type:del']"
                            >
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />-->
            </el-col>
        </el-row>

        <!-- 添加或修改用户配置对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="850px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="100px"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="所属上级" prop="parentId">
                            <treeselect
                                v-model="form.parentId"
                                :options="treeOptions"
                                :show-count="true"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="请选择所属上级分类"
                                @select="treeChange"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="维修员" prop="repairUserId">
                            <el-select
                                v-model="form.repairUserId"
                                filterable
                                placeholder="请选择维修员"
                                style="width: 100%"
                                clearable
                            >
                                <el-option
                                    v-for="keeper in repairUserList"
                                    :key="keeper.userId"
                                    :label="keeper.userName"
                                    :value="keeper.userId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="名称" prop="typeName">
                            <el-input
                                v-model="form.typeName"
                                placeholder="请输入名称"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="管理模式" prop="manageType">
                            <el-select
                                v-model="form.manageType"
                                filterable
                                placeholder="请选择管理模式"
                                style="width: 100%"
                            >
                                <el-option value="0" label="编码管理"
                                    >编码管理</el-option
                                >
                                <el-option value="1" label="数量管理"
                                    >数量管理</el-option
                                >
                                <el-option value="2" label="成套管理"
                                    >成套管理</el-option
                                >
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="内部租赁价" prop="leasePrice">
                            <el-input
                                v-model="form.leasePrice"
                                type="number"
                                placeholder="请输入租赁价格"
                                maxlength="10"
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="外部租赁价" prop="rentPrice">
                            <el-input
                                v-model="form.rentPrice"
                                type="number"
                                placeholder="请输入外部租赁价"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="原值" prop="buyPrice">
                            <el-input
                                v-model="form.buyPrice"
                                type="number"
                                placeholder="请输入原值"
                                maxlength="30"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计量单位" prop="unitName">
                            <el-input
                                v-model="form.unitName"
                                placeholder="请输入计量单位"
                                maxlength="20"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="资产属性" prop="propId">
                            <el-select
                                v-model="form.propId"
                                filterable
                                placeholder="请选择资产属性"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="keeper in propList"
                                    :key="keeper.propId"
                                    :label="keeper.propName"
                                    :value="keeper.propId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="库管员">
                            <el-select
                                v-model="form.keeperUserId"
                                filterable
                                placeholder="请选择库管员"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="keeper in keeperList"
                                    :key="keeper.userId"
                                    :label="keeper.userName"
                                    :value="keeper.userId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="厂家规格型号" prop="facModel">
                            <el-input
                                v-model="form.facModel"
                                placeholder="请输入厂家规格型号"
                                maxlength="100"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input
                                v-model="form.remark"
                                type="textarea"
                                placeholder="请输入备注内容"
                                maxlength="150"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="文档资料" prop="field101">
                            <el-upload
                                ref="field101"
                                :file-list="field101fileList"
                                action="#"
                                :limit="1"
                                accept=".docx, .pdf"
                                :http-request="
                                    (obj) => fileUpLoad(obj, 'fileUrl')
                                "
                                :on-exceed="exceedFile"
                            >
                                <el-button
                                    size="small"
                                    type="primary"
                                    icon="el-icon-upload"
                                    >点击上传</el-button
                                >
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图片" prop="photoName">
                            <el-upload
                                :http-request="
                                    (obj) => imgUpLoad(obj, 'fileUrl')
                                "
                                action="#"
                                :file-list="fileList"
                                list-type="picture-card"
                                :show-file-list="false"
                                accept=".png, .jpg, .jpeg"
                                :on-success="handleAvatarSuccess"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                            >
                                <!-- <el-button size="small" type="primary" icon="el-icon-upload">上传</el-button> -->
                                <img
                                    v-if="imageUrl"
                                    :src="uploadUrl + imageUrl"
                                    style="width: 140px; height: 140px"
                                    class="avatar"
                                />
                                <i
                                    v-else
                                    class="el-icon-plus avatar-uploader-icon"
                                ></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" height="650px" :src="dialogImageUrl" alt />
        </el-dialog>

        <!--    配置弹窗  -->
        <el-dialog
            :title="title"
            :visible.sync="configOpen"
            width="650px"
            append-to-body
            :close-on-click-modal="false"
        >
            <el-form
                ref="cform"
                :model="cform"
                :rules="crules"
                label-width="110px"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="调整前价格">
                            <el-input
                                v-model="leasePrice"
                                placeholder="调整前价格"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="调整后价格" prop="leasePrice">
                            <el-input-number
                                v-model="cform.leasePrice"
                                style="width: 100%"
                                controls-position="right"
                                :min="0"
                                maxlength="10"
                            ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="开始使用日期" prop="effTime">
                            <el-date-picker
                                v-model="cform.effTime"
                                style="width: 100%"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetime"
                                placeholder="开始使用日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitConfig"
                    >确 定</el-button
                >
                <el-button @click="cancelConfig">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {
    getListByMaType,
    getMaTypeList,
    getMaType,
    addMaType,
    updateMaType,
    delMaType,
} from '@/api/store/tools'
import { getUserByRoleList, getMaUserList } from '@/api/system/user'
import { getProLists } from '@/api/base/base'
import { imgUpLoad, fileUpLoad } from '@/api/system/upload'
import { getInfo } from '@/api/login'
export default {
    name: 'ToolsType',
    // dicts: ['sys_normal_disable', 'sys_user_sex'],
    components: { Treeselect },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 库管员用户数据
            keeperList: null,
            //维修员用户数据
            repairUserList: null,
            //资产类型数据
            propList: null,
            // 类型名称
            typeName: undefined,
            // 树选项
            treeOptions: undefined,
            //列表数据
            typeList: undefined,
            // 是否显示弹出层
            open: false,
            // 弹出层标题
            title: '',
            // 默认密码
            initPassword: undefined,
            // 日期范围
            dateRange: [],
            // 岗位选项
            postOptions: [],
            // 角色选项
            roleOptions: [],
            // 表单参数
            form: {
                companyId: '',
            },
            chosenTypeId: '',
            leasePrice: '',
            uploadHeader: process.env.VUE_APP_BASE_API,
            imageUrl: '',
            imageName: '',
            fileList: [],
            field101fileList: [],
            //上传地址
            // uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
            // uploadUrl:'http://112.29.103.165:21624/system',//线上服务器地址+system
            // uploadUrl:'http://192.168.5.12:9201',//本地测试
            uploadUrl: process.env.VUE_APP_BASE_API + '/system', // 上传的图片服务器地址
            defaultProps: {
                children: 'children',
                label: 'label',
            },

            // 查询参数
            queryParams: {
                // pageNum: 1,
                // pageSize: 10,
                typeName: undefined,
                // phonenumber: undefined,
                // status: undefined,
                // typeId: undefined
            },

            // 表单校验
            rules: {
                typeName: [
                    {
                        required: true,
                        message: '设备名称不能为空',
                        trigger: 'blur',
                    },
                    {
                        min: 2,
                        max: 20,
                        message: '设备名称长度必须介于 2 和 20 之间',
                        trigger: 'blur',
                    },
                ],
                parentId: [
                    {
                        required: true,
                        message: '所属上级不能为空',
                        trigger: 'blur',
                    },
                ],
                manageType: [
                    {
                        required: true,
                        message: '请选择管理模式',
                        trigger: 'change',
                    },
                ],
                leasePrice: [
                    {
                        required: true,
                        message: '内部租赁价格不能为空',
                        trigger: 'blur',
                    },
                ],
                buyPrice: [
                    {
                        required: true,
                        message: '原值不能为空',
                        trigger: 'blur',
                    },
                ],
                keeperUserId: [
                    {
                        required: true,
                        message: '库管员不能为空',
                        trigger: 'change',
                    },
                ],
                // password: [
                //   {required: true, message: "用户密码不能为空", trigger: "blur"},
                //   {min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur'}
                // ],
                // email: [
                //   {
                //     type: "email",
                //     message: "请输入正确的邮箱地址",
                //     trigger: ["blur", "change"]
                //   }
                // ],
                // phonenumber: [
                //   {
                //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                //     message: "请输入正确的手机号码",
                //     trigger: "blur"
                //   }
                // ]
            },
            companyId: undefined,
            dialogImageUrl: '',
            dialogVisible: false,
            configOpen: false,
            cform: {
                price: '',
                afterPrice: '',
                useDate: '',
            },
            crules: {
                leasePrice: [
                    {
                        required: true,
                        message: '调整后价格不能为空',
                        trigger: 'blur',
                    },
                    // { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                // effTime: [
                //   {required: true, message: "开始日期不能为空", trigger: "blur"}
                // ],
            },
        }
    },
    watch: {
        // 根据名称筛选部门树
        typeName(val) {
            this.$refs.tree.filter(val)
        },
    },
    created() {
        // this.getInfo()
        this.getList()
        this.getTreeData()
        this.getUserList()
        this.getPropData()
    },
    methods: {
        // getInfo() {
        //     getInfo().then((res) => {
        //         console.log(res, 'companyId----')
        //         this.companyId = res.user.companyId
        //     })
        // },
        /** 查询用户列表--库管员，维修员 */
        getUserList() {
            getMaUserList().then((response) => {
                console.log(response, '库管员')
                this.keeperList = response.data
            })
            getUserByRoleList().then((response) => {
                console.log(response, '维修员')
                this.repairUserList = response.data
            })
        },
        /** 查询新增页面-上级类型下拉树结构 */
        getTreeData() {
            getMaTypeList().then((response) => {
                this.treeOptions = response.data
            })
        },
        /** 查询资产属性下拉 */
        getPropData() {
            getProLists().then((response) => {
                this.propList = response.rows
            })
        },
        /** 查询列表 */
        getList() {
            this.loading = true
            getListByMaType(this.queryParams).then((response) => {
                this.typeList = response.data
                // this.total = response.total;
                this.loading = false
            })
        },
        // 筛选节点 - 左侧树
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        // 节点单击事件 - 左侧树
        handleNodeClick(data) {
            this.queryParams.typeId = data.id
            this.handleQuery()
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {
                photoUrl: '',
                photoName: '',
                documentUrl: '',
                documentName: '',
            }
            this.imageUrl = ''
            this.fileList = []
            this.field101fileList = []
            this.resetForm('form')
        },
        /** 搜索按钮操作 */
        handleQuery() {
            // this.queryParams.pageNum = 1;
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.queryParams.typeId = undefined
            this.$refs.tree.setCurrentKey(null)
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.typeId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '新增'
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const typeId = row.typeId || this.ids
            getMaType(typeId).then((response) => {
                if (response.data.propId == 0) {
                    response.data.propId = null
                }
                if (response.data.repairUserId == 0) {
                    response.data.repairUserId = null
                }
                this.form = response.data
                if (this.form.documentUrl) {
                    let file = {
                        name: this.form.documentName,
                        type: this.form.documentUrl,
                    }
                    this.field101fileList.push(file)
                } else {
                    this.field101fileList = []
                }

                this.imageUrl = this.form.photoUrl
                this.open = true
                this.title = '修改'
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            console.log(this.form, '提交参数---')
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.typeId != undefined) {
                        updateMaType(this.form).then((response) => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                            this.getTreeData()
                        })
                    } else {
                        // this.form.companyId = this.companyId
                        addMaType(this.form).then((response) => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                            this.getTreeData()
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const typeIds = row.typeId
            this.$modal
                .confirm('是否确认删除数据项？')
                .then(function () {
                    return delMaType(typeIds)
                })
                .then(() => {
                    this.getList()
                    this.$modal.msgSuccess('删除成功')
                })
                .catch(() => {})
        },
        //配置操作
        handleConfig(row) {
            this.resetForm('cform')
            this.chosenTypeId = row.typeId
            this.leasePrice = row.leasePrice
            // this.cform.leasePrice = row.leasePrice;
            this.$set(this.cform, 'leasePrice', row.leasePrice)
            this.configOpen = true
            this.title = '租赁价格调整'
        },
        submitConfig() {
            let param = {
                typeId: this.chosenTypeId,
                effTime: this.cform.effTime,
                leasePrice: this.cform.leasePrice,
            }
            console.log(param)
            this.$refs['cform'].validate((valid) => {
                if (valid) {
                    updateMaType(param).then((response) => {
                        this.$modal.msgSuccess('调整成功')
                        this.configOpen = false
                        this.getList()
                        this.getTreeData()
                    })
                }
            })
            // this.configOpen = false;
        },
        cancelConfig() {
            this.configOpen = false
        },
        // 图片上传
        imgUpLoad(param, name, index) {
            console.log(param, 'image')
            param.type = 'ma'
            imgUpLoad(param)
                .then((res) => {
                    if (res.code == 200) {
                        this.form.photoUrl = res.data.fileUrl
                        this.form.photoName = res.data.fileName
                        this.imageUrl = res.data.fileUrl
                        this.imageName = res.data.fileName
                    } else {
                        // this.$msgError(res.msg)
                        this.$modal.msgError(res.msg)
                    }
                })
                .catch((error) => {
                    // this.$msgError(error)
                    this.$modal.msgError(error)
                })
        },
        handleAvatarSuccess(res, file) {
            console.log('success')
        },
        handleRemove(file, fileList) {
            console.log(file, fileList)
            this.imageUrl = ''
            this.form.photoUrl = ''
            this.form.photoName = ''
        },
        //图片点击查看
        handlePictureCardPreview(file) {
            console.log(file)
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        //图片查看
        openImg(url) {
            this.dialogImageUrl = this.uploadUrl + url
            this.dialogVisible = true
        },
        //文件上传
        fileUpLoad(param, name, index) {
            console.log(param, 'fileUpLoad')
            param.type = 'ma'
            imgUpLoad(param)
                .then((res) => {
                    if (res.code == 200) {
                        this.form.documentUrl = res.data.fileUrl
                        this.form.documentName = res.data.fileName
                        this.field101fileList[0] = param.file
                        console.log(this.field101fileList)
                    } else {
                        // this.$msgError(res.msg)
                        this.$modal.msgError(res.msg)
                    }
                })
                .catch((error) => {
                    // this.$msgError(error)
                    this.$modal.msgError(error)
                })
        },
        exceedFile(files, fileList) {
            this.$message.warning(
                `只能选择 1 个文件导入，共选择了 ${
                    files.length + fileList.length
                } 个文件`,
            )
        },

        /** 导出按钮操作 */
        handleExport() {
            // this.download('system/user/export', {
            //   ...this.queryParams
            // }, `user_${new Date().getTime()}.xlsx`)
        },

        /* 树节点操作 */
        treeChange(val) {
            console.log(val, '树节点')

            this.form.companyId = val.companyId
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
</style>
