zhgdyun/src/views/projectFront/emergencyDisposal/reliefGoods.vue

<template>
    <div class="dangerousBigProject">
        <div>
            <div class="search-box">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                    <!-- <el-form-item label="企业">
                        <el-select v-model="formInline.enterpriseId" placeholder="请选择企业">
                            <el-option :label="item.enterpriseName" :value="item.id"
                                v-for="(item, index) in responsibilityList" :key="index">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="物资名称">
                        <el-input placeholder="请输入物资名称" v-model="formInline.goodsName" clearable style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item label="报警时间">
                        <el-date-picker v-model="formInline.time" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" plain>{{
                            $t('message.quality.inquire')
                            }}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="onRefresh" plain>刷新</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addEmergencyType()">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table-box">
                <!-- @cell-click="previewDetail" -->
                <!-- @selection-change="handleSelectionChange" -->
                <el-table class="tables" :data="tableData" size="small" :header-cell-style="{ 'text-align': 'center' }">
                    <!-- <el-table-column type="selection" align="center" width="60px"></el-table-column> -->
                    <el-table-column label="序号" type="index" align="center"></el-table-column>
                    <el-table-column align="center" label="物资名称" show-overflow-tooltip>
                        <!--  所属企业 -->
                        <template slot-scope="scope">
                            {{ scope.row.goodsName }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="详细地址" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.detailedAddress }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="经纬度" prop="longitude" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.longitude }}<span v-if="scope.row.latitude && scope.row.longitude">,</span>{{
                                scope.row.latitude }}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip></el-table-column>
                    <!-- 操作 -->
                    <el-table-column align="center" :label="$t('message.dangerousBigProject.operation')">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="editData(scope.row)" type="text" size="small">
                                <i class="el-icon-edit"></i> 编辑
                            </el-button>
                            <el-button @click.stop="deleteRow(scope.row)" type="text" size="small">
                                <i class="el-icon-delete"></i>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="pagerBox" background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page.sync="pageNo" layout="sizes, prev, pager, next"
                    :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="Number(total)">
                </el-pagination>
            </div>
            <!-- 提示 -->
            <el-dialog :modal-append-to-body="false" :title="$t('message.dangerousBigProject.hint')"
                :visible.sync="deleteDialog" width="30%">
                <span>
                    <!-- 是否确定删除该条记录？ -->
                    {{ $t('message.dangerousBigProject.hintContent') }}
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialog = false">
                        <!-- 取 消 -->
                        {{ $t('message.dangerousBigProject.cancel') }}
                    </el-button>
                    <el-button type="primary" @click="checkDelete">
                        <!-- 确 定 -->
                        {{ $t('message.dangerousBigProject.confirm') }}
                    </el-button>
                </span>
            </el-dialog>
        </div>
        <el-dialog :title="emergencyTypeDetail.title" :visible.sync="dialogVisible">
            <el-form class="form-box" :model="emergencyTypeDetail" :rules="rules" ref="ruleForm">
                <el-form-item label="物资名称：" :label-width="formLabelWidth" prop="goodsName">
                    <el-input v-model="emergencyTypeDetail.goodsName" placeholder="请输入物资名称"></el-input>
                </el-form-item>
                <el-form-item label="经纬度：" :label-width="formLabelWidth" class="coord" prop="longitlatitude">
                    <el-input disabled v-model="emergencyTypeDetail.longitlatitude" placeholder="请输入经纬度"></el-input>
                    <span style="margin-left: 8px;color:#5181f6;cursor: pointer;" @click="getCurrentPosition()">拾取经纬度</span>
                </el-form-item>
                <el-form-item label="详细地址：" :label-width="formLabelWidth" prop="longitlatitude">
                    <el-input disabled v-model="emergencyTypeDetail.detailedAddress" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <el-form-item label="备注：" :label-width="formLabelWidth">
                    <el-input v-model="emergencyTypeDetail.remark" type="textarea" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="getEmergencyReliefAdd('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!--高德地图-->
        <gd-map v-if="showMap" :addProjectForm="addProjectForm" @closeMap="closeMap" @save="getLngLat"></gd-map>
    </div>
</template>

<script>
import moment from 'moment'
import gdMap from '@/components/map/gd-map.vue'
//   import addPlan from './addPlan.vue'
import {
    getEnterpriseInfoListApi,
    getFireSafetyQueryByIdApi
} from "@/assets/js/api/specialWork"
import {
    getEmergencyReliefPageApi,
    getEmergencyReliefAddApi,
    getEmergencyReliefEditApi,
    getEmergencyReliefDeleteApi
} from "@/assets/js/api/emergencyDisposal"

import { getCooperatorListApi } from "@/assets/js/api/cooperationUnit";
export default {
    components: {
        //   addPlan,
        // detail,
        // editPlan
        gdMap
    },
    data() {
        return {
            emergencyTypeDetail: {
                title: "",
                typeName: "",
                remark: "",
                fileList1: [],
                fileList2: [],
                enterpriseIdList: [],
                goodsName: "",
                longitlatitude: "",
                remark: "",
                detailedAddress:"",
            },
            formLabelWidth: "110px",
            dialogVisible: false,
            deleteDialog: false,
            rules: {
                goodsName: [
                    { required: true, message: '请输入物资名称', trigger: 'blur' },
                ], longitlatitude: [
                    { required: true, message: '请输入经纬度', trigger: 'blur' },
                ]
            },

            formInline: {
                firemanName: '',
                enterpriseId: '',
                workTicketCode: "",
                time: "",
                goodsName: "",
            },
            formLabelWidthDetail: "270px",
            detailData: {},
            responsibilityList: [],
            planDate: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },
            isDisabledDetail: true,
            workDetail: {},

            operateTitle: "新增",
            isAdd: false,
            isEdit: false,
            isDisabled: false,
            engineeringName: "",
            detailId: "",
            isSuperDanger: false,
            tableData: [],
            dialogFormVisible: true,
            multipleSelection: [],
            addForm: {
                name: "",
                category: "",
                points: "",
                describe: "",
                address: "",
                date: [],
                people: "",
                unit: []
            },
            props: {
                multiple: true
            },
            typeOptions: [],
            describeOptions: [],
            options: [{
                label: 111,
                value: 12
            }],

            safeStatus: false,
            safeStatus2: false,
            safeStatus3: false,
            fileList: [],
            fileList2: [],
            fileList3: [],
            dialogTitle: "",
            pageNo: 1,
            pageSize: 10,
            total: 10,
            projectSn: "",
            enterpriseTypeId: 1,
            cooperatorList: [],

            showMap: false,
            addProjectForm: {
                placeCode: '',
                areaCode: '',
                buildingNum: '',
                bulidStatus: '',
                cityCode: '',
                companySn: '',
                constructionStage: '',
                engineeringPurpose: '',
                households: '',
                latitude: '',
                layoutImage: '',
                longitude: '',
                projectAcreage: '',
                projectAddress: '',
                projectName: '',
                projectNumber: '',
                projectType: '',
                provincesCode: '',
                saleAcreage: '',
                startWorkDate: '',
                structureType: '',
                projectManage: '',
                projectTel: '',
                majorProjectType: 0,
                constructionPermit: '',
                streetTownshipTownCode: '',
                streetTownshipTown: ''
            },
        }
    },
    created() {
        this.projectSn = this.$store.state.projectSn
        this.styleType = this.$store.state.userInfo.styleType;
        // this.getCooperatorList()
        // this.getType()
        this.initData();
        this.getEnterpriseInfoList();
    },
    mounted() {

    },
    watch: {
        "dialogVisible": {
            handler(newVal) {
                if (!newVal) {
                    this.$refs['ruleForm'] && this.$refs['ruleForm'].resetFields()
                }
            },
        },
    },
    methods: {
        // 删除
        deleteRow(row) {
            console.log(row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    getEmergencyReliefDeleteApi({ id: row.id }).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            this.$message.success(res.message)
                            this.initData()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });

        },
        // 添加
        getEmergencyReliefAdd(formName) {
            // console.log(this.emergencyTypeDetail);
            // return
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj = {
                        projectSn: this.projectSn,
                        detailedAddress: this.emergencyTypeDetail.detailedAddress,
                        goodsName: this.emergencyTypeDetail.goodsName,
                        longitude: this.emergencyTypeDetail.longitlatitude.split(',')[0],
                        latitude: this.emergencyTypeDetail.longitlatitude.split(',')[1],
                        remark: this.emergencyTypeDetail.remark,
                    }
                    if (this.emergencyTypeDetail.title == '新增') {
                        getEmergencyReliefAddApi(obj).then((res) => {
                            if (res.code) {
                                console.log(res.result, 1)
                                this.$message.success(res.message)
                                this.initData()
                                this.dialogVisible = false;
                                // this.responsibilityList = res.result;
                            }
                        })
                    } else {
                        obj.id = this.emergencyTypeDetail.id;
                        getEmergencyReliefEditApi(obj).then((res) => {
                            if (res.code) {
                                console.log(res.result, 1)
                                this.$message.success(res.message)
                                this.initData()
                                this.dialogVisible = false;
                                // this.responsibilityList = res.result;
                            }
                        })
                    }

                } else {
                    return false;
                }
            });

        },
        //打开地图
        getCurrentPosition() {

            if (this.emergencyTypeDetail.id) {
                this.addProjectForm.latitude = this.emergencyTypeDetail.latitude;
                this.addProjectForm.longitude = this.emergencyTypeDetail.longitude;
            } else {
                this.addProjectForm.latitude = '';
                this.addProjectForm.longitude = '';
            }
            this.showMap = true;
        },
        getLngLat(v) {
            const _this = this;
            this.showMap = false;
            console.log(1111111111, v);
            let position = parseFloat(v.lng)+ ',' + parseFloat(v.lat) //位置的经纬度 
            var geocoder = new AMap.Geocoder({});

            geocoder.getAddress(position, function (status, result) {
                console.log(status, result);
                if (status === 'complete' && result.regeocode) {
                    // console.log(result);
                    _this.emergencyTypeDetail.detailedAddress = result.regeocode.formattedAddress;
                } else {
                    console.log('根据经纬度查询地址失败')
                }
            });

            this.emergencyTypeDetail.longitlatitude = v.lng + ',' + v.lat;
        },
        closeMap(val) {
            this.showMap = val
            console.log('打印子组件', val)
        },
        handleAvatarSuccess(res, file) {
            this.form.loginLogo = this.$store.state.FILEURL + res.data[0].imageUrl
            this.fileList = [{ name: '', url: this.form.loginLogo }]
            if (this.fileList.length >= 1) {
                this.upload_btn1 = true; // 隐藏上传按钮
            }
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            // this.dialogVisible = true
        },
        handleDelete(file, fileList) {
            this.upload_btn1 = false;
            this.fileList = fileList
        },
        addEmergencyType(row) {
            this.emergencyTypeDetail.title = "新增";
            this.emergencyTypeDetail.goodsName = "";
            this.emergencyTypeDetail.longitlatitude = "";
            this.emergencyTypeDetail.remark = "";
            this.emergencyTypeDetail.id = "";
            this.emergencyTypeDetail.detailedAddress = "";

            this.dialogVisible = true;
        },
        editData(row) {

            this.emergencyTypeDetail.title = "编辑";
            console.log(111111111, row);

            this.emergencyTypeDetail.goodsName = row.goodsName;
            this.emergencyTypeDetail.longitlatitude = row.longitude + ',' + row.latitude;
            this.emergencyTypeDetail.remark = row.remark;
            this.emergencyTypeDetail.latitude = row.latitude;
            this.emergencyTypeDetail.longitude = row.longitude;
            this.emergencyTypeDetail.detailedAddress = row.detailedAddress;
            this.emergencyTypeDetail.id = row.id;

            // this.$refs['ruleForm'] && this.$refs['ruleForm'].resetFields()
            this.dialogVisible = true;
        },
        onSubmit() {
            this.pageNo = 1;
            this.initData();
        },
        onRefresh() {
            this.formInline.enterpriseId = "";
            this.formInline.firemanName = "";
            this.formInline.goodsName = "";

            this.pageNo = 1;
            this.initData();
        },
        getEnterpriseInfoList() {
            getEnterpriseInfoListApi({
                projectSn: this.projectSn
            }).then((res) => {
                if (res.result) {
                    console.log(res.result, 1)
                    this.responsibilityList = res.result;
                }
            })
        },
        initData() {
            // this.tableData = [{}]
            let data = {
                goodsName: this.formInline.goodsName,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                projectSn: this.projectSn,
            }
            getEmergencyReliefPageApi(data).then((res) => {
                if (res.result) {
                    console.log(res.result.records, 1)
                    this.tableData = res.result.records;

                    this.total = res.result.total;
                }
            });
        },
        handleSizeChange(e) {
            this.pageSize = e;
            this.initData()
        },
        handleCurrentChange() {
            this.initData()
        },
        checkDelete() {
            getEmergencyReliefDeleteApi({ id: this.deleteId }).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.$message.success(res.message)
                    this.initData()
                }
            })
            this.deleteDialog = false
        },
    }
}
</script>

<style lang="less" scoped>
.coord /deep/ .el-form-item__content {
    display: flex;
    justify-content: flex-start;

    .el-input {
        width: 75%;
    }
}

/deep/.el-dialog__footer {
    text-align: center;
}

/deep/ .el-dialog__body {
    padding: 10px 20px 30px;
}

/deep/ .el-upload-dragger {
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;

    .el-upload__text {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .el-icon-upload {
        font-size: 20px;
        margin: 0;
        line-height: 15px;
        position: absolute;
        left: 17%;
        top: 50%;
        transform: translateY(-50%);
    }
}

/deep/ .el-upload--picture-card {
    width: 66px;
    height: 62px;
    position: relative;

    i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }


}

/deep/ .el-upload-list__item {
    width: 66px;
    height: 62px;
    margin-bottom: 0
}

.el-icon-setting,
.el-icon-map-location {
    color: #5181F6;
}

.el-button--text {
    color: #262d47;
}

.form-box {
    width: 90%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    /deep/.el-form-item {
        width: 85%;
        padding-right: 10px;
        box-sizing: border-box;
    }

    // /deep/.el-col-12{
    //     padding-left: 20px;
    // }
    /deep/.el-input__inner {
        width: 100%;
    }

    /deep/.el-select {
        width: 100%;
    }

    /deep/.el-cascader {
        width: 100%;
    }
}

.gasanalysis-table {
    padding: 10px 20px;

    .el-row:first-child .el-col {
        background-color: #E9E9E9;
    }

    .el-row {
        font-size: 14px;
        color: #000;

        .el-col:first-child {
            background-color: #E9E9E9;
        }

        .el-col {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #E1E1E1;
        }
    }
}

.dangerousBigProject {
    padding-bottom: 20px;
    height: 100%;
    background: #fff;
    padding: 0 10px;
    padding-top: 20px;
    box-sizing: border-box;

    >div {
        height: 100%;

        .search-box {
            display: flex;
            margin-bottom: 20px;

            .search-input {
                width: 260px;
                margin-right: 20px;
            }
        }
    }
}

.el-icon-edit {
    color: #5181f6;
}

.el-icon-delete {
    color: #f56c6c;
}

.table-box {
    display: flex;
    flex-direction: column;
    height: calc(100% - 72px);

    .tables {
        margin-bottom: auto;
    }
}

.table-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    p {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    // .item-status {
    //   background: #f56c6c;
    //   display: block;
    //   color: #fff;
    //   border-radius: 4px;
    //   padding: 0 4px;
    //   height: 20px;
    // }
    .item-status {
        display: flex;
        align-items: center;

        img {
            width: 15px;
            height: 15px;
        }

        span {
            font-size: 14px;
            color: #EA3941;
        }
    }

    .status-none {
        height: 20px;
    }

    .item-title {
        font-weight: 600;
    }
}

.table-category-item {
    display: flex;

    p {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    // .item-status {
    //   background: #f56c6c;
    //   display: block;
    //   color: #fff;
    //   border-radius: 4px;
    //   padding: 0 4px;
    //   height: 20px;
    // }
    .item-status {
        display: flex;
        align-items: center;
        margin-right: 3px;

        img {
            width: 15px;
            height: 15px;
            margin-right: 3px;
        }

        span {
            font-size: 14px;
            color: #EA3941;
        }
    }

    .status-none {
        height: 20px;
    }

    .item-title {
        font-weight: 600;
    }
}

.add-dialog {
    /deep/ .el-dialog {
        width: 80%;
    }

    .form-title {
        margin-bottom: 20px;
    }

    /deep/ .el-form-item__label {
        text-align: left;
        white-space: nowrap;
    }

    /deep/ .el-form {
        padding-left: 36px;
        padding-right: 26px;
        margin-bottom: 20px;
    }

    /deep/ .el-select {
        width: 100%;
    }

    /deep/ .el-date-editor.el-input {
        width: 100%;
    }

    /deep/ .el-date-editor {
        width: 100%;
    }

    /deep/ .el-cascader {
        width: 100%;
    }

    .upload-item {
        display: flex;
        margin-bottom: 10px;
        align-items: center;

        span {
            margin-right: 16px;
        }

        .switch-check {
            margin-left: 8px;
            color: #409eff;
            line-height: 20px;
        }

        .switch-uncheck {
            margin-left: 8px;
            line-height: 20px;
        }
    }

    .upload-file {
        width: 50%;
        padding-left: 26px;
        box-sizing: border-box;
        margin-bottom: 20px;

        a {
            color: #409eff;
            text-decoration: none;
            margin-left: 6px;
        }
    }

    .upload-box {
        display: flex;
        flex-wrap: wrap;
    }
}

.el-pagination {
    display: flex;
    justify-content: center;
    // margin-top: 20px;
}

.backText {
    padding: 8px 0;
    padding-left: 10px;

    /deep/.el-page-header__content {
        font-size: 14px;
    }
}

.dark {
    /deep/.el-page-header__content {
        color: #fff;
    }

    /deep/ .print-btn {
        background: none;
        color: #262d47;
        font-size: 14px;
    }
}
</style>