yudao-ui-saas/src/views/finance/asset/index.vue

<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="资产名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入资产名称" clearable style="width: 250px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="资产编号" prop="assetInfoUuid">
                <el-input v-model="queryParams.assetInfoUuid" placeholder="请输入资产编号" clearable style="width: 250px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="资产型号" prop="typeNumber">
                <el-input v-model="queryParams.typeNumber" placeholder="请输入资产型号" clearable style="width: 250px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="序列号" prop="serialNumber">
                <el-input v-model="queryParams.serialNumber" placeholder="请输入资产序列号" clearable style="width: 250px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="资产日期" prop="capitalizationDate">
                <el-date-picker v-model="queryParams.capitalizationDate" style="width: 250px"
                    value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
            </el-form-item>
            <el-form-item label="折旧年限" prop="depreciationYear">
                <el-input v-model="queryParams.depreciationYear" type="number" placeholder="折旧年限" clearable
                    style="width: 250px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="资产状态" prop="assetState">
                <el-select v-model="queryParams.assetState" placeholder="资产状态" clearable style="width: 250px">
                    <el-option label="可用" value="0" />
                    <el-option label="占用" value="1" />
                    <el-option label="报废" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="领用人" prop="receiveEmployeeName">
                <el-input v-model="queryParams.receiveEmployeeName" placeholder="领用人" clearable style="width: 250px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="归属部门" prop="assetDeptId">
                <treeselect style="width: 250px" :default-expand-level="1" v-model="queryParams.assetDeptId"
                    :options="deptOptions" :normalizer="normalizer" placeholder="选择归属部门" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @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="['asset:info:create']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                    :loading="exportLoading" v-hasPermi="['asset:info:export']">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" size="mini" :disabled="single" @click="handleReceive('领用')"
                    v-hasPermi="['asset:info:receive']">领用</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" size="mini" :disabled="single" @click="handleReceive('归还')"
                    v-hasPermi="['asset:info:return']">归还</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" size="mini" :disabled="single" @click="handleReceive('报废')"
                    v-hasPermi="['asset:info:retirement']">报废</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button icon="el-icon-plus" size="mini" :disabled="single" @click="handleReceiveInfo()"
                    v-hasPermi="['asset:info:receiveInfo']">资产流转记录</el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column label="资产名称" align="center" prop="name" min-width="150" />
            <el-table-column label="资产编号" align="center" prop="assetInfoUuid" min-width="350" />
            <el-table-column label="资产型号" align="center" prop="typeNumber" min-width="150" />
            <el-table-column label="资产序列号" align="center" prop="serialNumber" min-width="150" />
            <el-table-column label="购买日期" align="center" prop="purchaseDate" min-width="100" />
            <el-table-column label="资产化日期" align="center" prop="capitalizationDate" min-width="100" />
            <el-table-column label="折旧年限" align="center" prop="depreciationYear" min-width="80" />
            <el-table-column label="资产状态" align="center" prop="assetState" min-width="80">
                <template v-slot="scope">
                    <span>{{ scope.row.assetState == 0 ? '可用' : scope.row.assetState == 1 ? '占用' : '报废' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="领用人" align="center" prop="receiveEmployeeName" min-width="80" />
            <el-table-column label="所属部门" align="center" prop="assetDeptName" min-width="100" />
            <el-table-column label="资产归属地" align="center" prop="assetPlace" min-width="150" />
            <el-table-column label="资产负责人" align="center" prop="assetManagerEmployeeName" min-width="100" />
            <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width"
                min-width="150">
                <template v-slot="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['cash:payment-info:update']">修改</el-button>
                    <el-button v-if="scope.row.assetState != 1" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['cash:payment-info:delete']">删除</el-button>
                    <el-button size="mini" type="text" icon="el-icon-detail"
                        @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="资产名称" prop="name">
                            <el-input maxlength="20" v-model="form.name" placeholder='请输入资产名称'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="资产型号" prop="typeNumber">
                            <el-input maxlength="100" show-word-limit type="textarea" v-model="form.typeNumber"
                                placeholder="请输入资产型号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="序列号" prop="serialNumber">
                            <el-input maxlength="100" show-word-limit type="textarea" v-model="form.serialNumber"
                                placeholder="请输入序列号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="购买日期" prop="purchaseDate">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="form.purchaseDate" type="date"
                                placeholder="选择日期" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="资产日期" prop="capitalizationDate">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="form.capitalizationDate" type="date"
                                placeholder="选择开始使用计提折旧的日期" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="折旧年限" prop="depreciationYear">
                            <el-input-number v-model="form.depreciationYear" :min="1"
                                style="width: 100%;"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所属部门" prop="assetDeptId">
                            <treeselect style="width: 100%" :default-expand-level="1" v-model="form.assetDeptId"
                                :options="deptOptions" :normalizer="normalizer" placeholder="选择部门" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="归属地" prop="assetPlace">
                            <el-input maxlength="20" v-model="form.assetPlace" placeholder='请输入资产归属地'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="负责人" prop="assetManagerEmployeeName">
                            <el-input v-model="form.assetManagerEmployeeName" placeholder='点击选择' readonly
                                @click.native="openSingle"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="display: none;">
                        <el-form-item label="负责人Id" style="display: none;">
                            <el-input v-model="form.assetManagerEmployeeId" placeholder='负责人Id' disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件">
                            <el-upload :action="fileUrl" :headers="headers" :file-list="files"
                                :on-success="handleFileSuccessCite" :before-upload="beforeUploadFile"
                                :on-remove="handleRemove">
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks"
                                placeholder="请输入" />
                        </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 :title="title" :visible.sync="openDetail" width="800px" append-to-body>
            <div class="widget-wrapper">
                <div class="widget-list">
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">资产名称</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.name">{{ form.name }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">资产型号</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.typeNumber">{{ form.typeNumber }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">序列号</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.serialNumber">{{ form.serialNumber }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">资产日期</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.purchaseDate">{{ form.purchaseDate }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">资产日期</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.capitalizationDate">{{ form.capitalizationDate }}</span>
                        </div>
                    </div>


                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">折旧年限</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.depreciationYear">{{ form.depreciationYear }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">所属部门</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.assetDeptName">{{ form.assetDeptName }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">归属地</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.assetPlace">{{ form.assetPlace }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">负责人</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.assetManagerEmployeeName">{{ form.assetManagerEmployeeName }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <div class="field-name">报废日期</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.retirementDate">{{ form.retirementDate }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <span class="field-required">*</span>
                            <div class="field-name">报废原因</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.retirementReason">{{ form.retirementReason }}</span>
                        </div>
                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <div class="field-name">附件</div>
                        </div>
                        <div class="field-component">
                            <div v-for="(item, index) in form.fileList" :key="index">
                                <a :href="item.url" target="_blank" :title="item.name" style="color: #5094d5;">{{
                                    item.name
                                    }}</a>
                            </div>
                        </div>

                    </div>
                    <div class="fx-field x-grid-col-12">
                        <div class="field-label">
                            <div class="field-name">备注</div>
                        </div>
                        <div class="field-component">
                            <span :title="form.remarks">{{ form.remarks }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 领用,归还,报废对话框 -->
        <el-dialog :title="receiveTitle" :visible.sync="openReceive" width="600px" append-to-body>
            <el-form ref="receiveform" :model="receiveform" :rules="receiveRules" label-width="80px">
                <el-row>
                    <el-col :span="24" v-if="receiveTitle=='领用'">
                        <el-form-item label="领用人" prop="employeeName">
                            <el-input v-model="receiveform.employeeName" placeholder='点击选择' readonly
                                @click.native="RopenSingle"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="display: none;">
                        <el-form-item label="领用人Id" style="display: none;">
                            <el-input v-model="receiveform.employeeId" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="receiveTitle=='领用'">
                        <el-form-item label="领用日期" prop="receiveDate">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="receiveform.receiveDate" type="date"
                                placeholder="选择领用日期" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="receiveTitle=='归还'">
                        <el-form-item label="归还人" prop="employeeName">
                            <el-input v-model="receiveform.employeeName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="receiveTitle=='归还'">
                        <el-form-item label="归还日期" prop="returnDate">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="receiveform.returnDate" type="date"
                                placeholder="选择归还日期" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="receiveTitle=='报废'">
                        <el-form-item label="报废日期" prop="retirementDate">
                            <el-date-picker value-format="yyyy-MM-dd" v-model="receiveform.retirementDate" type="date"
                                placeholder="选择报废日期" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="24" v-if="receiveTitle=='领用'">
                        <el-form-item label="领用原因" prop="reason">
                            <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="receiveform.reason"
                                placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="receiveTitle=='归还'">
                        <el-form-item label="归还原因" prop="returnReason">
                            <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="receiveform.returnReason"
                                placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="receiveTitle=='报废'">
                        <el-form-item label="报废原因" prop="retirementReason">
                            <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="receiveform.retirementReason"
                                placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitReceiveForm">确 定</el-button>
                <el-button @click="cancelReceive">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 流转记录对话框 -->
        <el-dialog title="流转记录" :visible.sync="openReceiveInfo" width="1000px" append-to-body>
            <el-table v-loading="loading" :data="receiveInfoList">
            <el-table-column label="领用人" align="center" prop="employeeName" />
            <el-table-column label="部门" align="center" prop="deptName" />
            <el-table-column label="职位" align="center" prop="position" />
            <el-table-column label="手机号" align="center" prop="employeePhone" />
            <el-table-column label="领用日期" align="center" prop="receiveDate" />
            <el-table-column label="领用事由" align="center" prop="reason"  />
            <el-table-column label="是否归还" align="center" prop="returned">
                <template v-slot="scope">
                    <span>{{ scope.row.returned == 0 ? '未归还' : '已归还' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="归还日期" align="center" prop="returnDate" />
            <el-table-column label="归还事由" align="center" prop="returnReason" />
            <el-table-column label="操作人" align="center" prop="operatorName"/>
        </el-table>
        <pagination v-show="totalR > 0" :total="totalR" :page.sync="queryParamsR.pageNo" :limit.sync="queryParamsR.pageSize"
            @pagination="getListR" />
        </el-dialog>
        <PeopleSelect type="single" :isCheck="true" :open="singlePeopleOpen"
            @cancel="singlePeopleOpen = false" @submit="submitSingle"></PeopleSelect>
        <PeopleSelect type="single" :isCheck="true" :open="RsinglePeopleOpen"
            @cancel="RsinglePeopleOpen = false" @submit="RsubmitSingle"></PeopleSelect>
    </div>
</template>

<script>
import { receiveItem,returnItem,retireItem,receiveInfo,listInfo, getInfo, delInfo, addInfo, updateInfo, exportInfo } from "@/api/finance/asset/index";
import PeopleSelect from "@/components/PeopleSelect/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listDept } from "@/api/system/dept";
import { getBaseHeader } from "@/utils/request";
export default {
    components: {
        PeopleSelect,
        Treeselect,
    },
    data() {
        return {
            receiveInfoList:[],
            openReceiveInfo:false,
            receiveTitle:'',
            openReceive: false,
            assetInfo: undefined,
            // 非单个禁用
            single: true,
            singlePeopleOpen: false,
            RsinglePeopleOpen: false,
            files: [],
            // 设置上传的请求头部
            headers: getBaseHeader(),
            // 上传的地址
            fileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/uploaData',
            // 部门列表
            deptOptions: [], // 部门属性结构
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            totalR: 0,
            // 字典表格数据
            dataList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            openDetail: false,
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 10,
                name: undefined,
                assetInfoUuid: undefined,
                typeNumber: undefined,
                serialNumber: undefined,
                capitalizationDate: [],
                depreciationYear: undefined,
                assetState: undefined,
                receiveEmployeeName: undefined,
                assetDeptId: undefined
            },
            queryParamsR: {
                pageNo: 1,
                pageSize: 10,
                assetInfoId: undefined,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                name: [
                    { required: true, message: '请输入资产名称', trigger: 'blur' },
                ],
                purchaseDate: [
                    { required: true, message: '请选择资产日期', trigger: 'change' }
                ],
                capitalizationDate: [
                    { required: true, message: '选择开始使用计提折旧的日期', trigger: 'change' }
                ],
                depreciationYear: [
                    { required: true, message: '折旧年限', trigger: 'blur' },
                ],
                assetDeptId: [
                    { required: true, message: '选择部门', trigger: 'change' },
                ],
                assetManagerEmployeeName: [
                    { required: true, message: "请选择" }
                ],
            },
            receiveform:{},
            receiveRules: {
                employeeName: [
                    { required: true, message: "请选择领用人" }
                ],
                receiveDate: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                returnDate: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                retirementDate: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                reason: [
                    { required: true, message: '请输入原因', trigger: 'blur' },
                ],
                returnReason: [
                    { required: true, message: '请输入原因', trigger: 'blur' },
                ],
                retirementReason: [
                    { required: true, message: '请输入原因', trigger: 'blur' },
                ],
                
                

            },
        };
    },
    created() {
        this.getList();
        this.getListDept();
    },
    methods: {
        //流转记录弹窗
        handleReceiveInfo(){
            this.queryParamsR.assetInfoId = this.assetInfo[0].id;
            this.getListR();
            this.openReceiveInfo = true;
        },

        //打开领用，归还，报废弹窗
        handleReceive(val) {
            this.reset();
            if((val == '领用' || val == '报废') && this.assetInfo[0].assetState == 0){
                this.receiveTitle = val;
                this.openReceive = true;
            }
            else if((val == '归还') && this.assetInfo[0].assetState == 1){
                this.receiveform.employeeName = this.assetInfo[0].receiveEmployeeName;
                this.receiveTitle = val;
                this.openReceive = true;
                
            }else{
                this.$message.warning("该数据的资产状态不支持此操作,请重新选择!");
                return;
            }
            
            
        },
        handleSelectionChange(selection) {
            console.log(selection);
            this.assetInfo = selection.map(item => item)
            console.log(this.assetInfo);
            this.single = selection.length != 1
        },
        //打开选人弹窗
        openSingle() {
            this.singlePeopleOpen = true;
        },
        submitSingle(userNamelist, nikeNamelist, userIdList) {
            console.log(userNamelist);
            this.form.assetManagerEmployeeName = nikeNamelist.join();
            this.form.assetManagerEmployeeId = userIdList.join();
            this.singlePeopleOpen = false;
        },
         //打开选人弹窗
        RopenSingle() {
            this.RsinglePeopleOpen = true;
        },
        RsubmitSingle(userNamelist, nikeNamelist, userIdList) {
            console.log(userNamelist);
            this.receiveform.employeeName = nikeNamelist.join();
            this.receiveform.employeeId = userIdList.join();
            this.RsinglePeopleOpen = false;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            let fileIds = [];
            for (let i in fileList) {
                let id = fileList[i].response.data.id;
                fileIds.push(id);
            }
            this.form.fileIdList = fileIds;
        },
        beforeUploadFile(file) {
            console.log(file);
            const size = file.size / 1024 / 1024;
            console.log(size);
            if (size > 5) {
                this.$message.error("文件大小不能超过5MB！");
                return false;
            }
        },
        handleFileSuccessCite(res, file, fileList) {
            console.log(file, fileList);
            console.log("------", "==========");
            console.log("res = ", res);

            let fileIds = [];
            for (let i in fileList) {
                let response = fileList[i].response;
                if (response.errno && response.errno != "0") {
                    this.$message.error("该文件上传失败,已被移除,请重新上传!");
                    // 上传失败移除该 file 对象
                    fileList.splice(i, 1);
                } else {
                    let id = fileList[i].response.data.id;
                    fileIds.push(id);
                }
            }
            this.form.fileIdList = fileIds;
        },
        /** 查询部门列表 */
        getListDept() {
            listDept().then(response => {
                this.deptOptions = this.handleTree(response.data, "id");
            });
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children;
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children
            };
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            // 执行查询
            listInfo(this.queryParams).then(response => {
                this.dataList = response.data.list;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        getListR() {
            this.loading = true;
            // 执行查询
            receiveInfo(this.queryParamsR).then(response => {
                this.receiveInfoList = response.data.list;
                this.totalR = response.data.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        cancelReceive() {
            this.openReceive = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.files = [],
            this.form = {
                name: undefined,
                typeNumber: undefined,
                serialNumber: undefined,
                purchaseDate: undefined,
                capitalizationDate: undefined,
                depreciationYear: 1,
                assetDeptId: undefined,
                assetPlace: undefined,
                assetManagerEmployeeName: undefined,
                assetManagerEmployeeId: undefined,
                fileIdList: undefined,
                remarks: undefined,
            };
            this.receiveform = {
                assetInfoId: undefined,
                employeeName: undefined,
                employeeId: undefined,
                receiveDate: undefined,
                returnDate: undefined,
                retirementDate: undefined,
                reason: undefined,
                returnReason: undefined,
                retirementReason: undefined,
            };
            this.resetForm("form");
            this.resetForm("receiveform");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNo = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加";
        },

        /** 详情按钮操作 */
        handleDetail(row) {
            this.reset();
            const id = row.id;
            getInfo(id).then(response => {
                this.form = response.data;
                this.openDetail = true;
                this.title = "详情";
            });
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id;
            getInfo(id).then(response => {
                let files = response.data.fileList;
                if (files) {
                    this.files = [];
                    for (let i in files) {
                        let url = files[i].url;
                        let name = files[i].name;
                        let id = files[i].id;

                        this.files.push({
                            name: name,
                            url: url,
                            response: { error: "0", data: { url: url, id: id } },
                        });
                    }
                }
                this.form = response.data;
                this.open = true;
                this.title = "修改";
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id !== undefined) {
                        updateInfo(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addInfo(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        submitReceiveForm: function () {
            this.$refs["receiveform"].validate(valid => {
                if (valid) {
                    this.receiveform.assetInfoId = this.assetInfo[0].id;
                    if (this.receiveTitle== '领用') {
                        receiveItem(this.receiveform).then(response => {
                            this.$modal.msgSuccess("领用成功");
                            this.openReceive = false;
                            this.getList();
                        });
                    } else if(this.receiveTitle== '归还') {
                        returnItem(this.receiveform).then(response => {
                            this.$modal.msgSuccess("领用成功");
                            this.openReceive = false;
                            this.getList();
                        });
                    }else{
                        retireItem(this.receiveform).then(response => {
                            this.$modal.msgSuccess("报废成功");
                            this.openReceive = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除数据项?').then(function () {
                return delInfo(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            // 处理查询参数
            let params = { ...this.queryParams };
            params.pageNo = undefined;
            params.pageSize = undefined;
            // 执行导出
            this.$modal.confirm('是否确认导出所有数据项?').then(() => {
                this.exportLoading = true;
                return exportInfo(params);
            }).then(response => {
                this.$download.excel(response, '资产信息.xls');
                this.exportLoading = false;
            }).catch(() => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.widget-wrapper>.widget-list {
    display: flex;
    flex-wrap: wrap;
}

.x-grid-col-6 {
    width: 50%;
}

.x-grid-col-12 {
    width: 100%;
}

.fx-field {
    line-height: 20px;
    padding: 7px 12px 12px;
    position: relative;
}

.fx-field .field-label {
    word-wrap: break-word;
    color: #141e31;
    display: flex;
    font-weight: 600;
    line-height: 20px;
    padding: 5px 0;
    position: relative;
    word-break: break-word;
}

.fx-field .field-label .field-required {
    color: #eb5050;
    margin-left: -6px;
    position: relative;
}

.fx-field .field-label .field-name {
    overflow: hidden;
}

.field-component {
    word-wrap: break-word;
    background: #f5f6f8;
    border-radius: 2px;
    color: #141e31;
    font-size: 14px;
    line-height: 20px;
    min-height: 32px;
    padding: 6px 8px;
    white-space: pre-wrap;
    word-break: break-word;
}

ul {
    padding-left: 0px !important;
}

.el-tag+.el-tag {
    margin-left: 10px;
}
</style>