zhangzl
/
rongxin.dashboard
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
管理系统PC端
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
49 Revize
1 Větev
5.5 MiB
 
 
 
 
Strom: 97e1a0d194
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „97e1a0d194“
${ noResults }
rongxin.dashboard/src/views/resource/land/index.vue

710 řádky
32 KiB
Surový Blame Historie 

  1. <template>

  2.   <div class="app-container">

  3.     <el-row :gutter="20">

  4.       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">

  5.         <!--部门数据-->

  6.         <pane size="16">

  7.           <el-col>

  8.             <div class="head-container">

  9.               <el-input v-model="deptName" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />

  10.             </div>

  11.             <div class="head-container container_main">

  12.               <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />

  13.             </div>

  14.           </el-col>

  15.         </pane>

  16.         <!--用户数据-->

  17.         <pane size="84">

  18.           <el-col>

  19. 

  20.             <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

  21.               <el-form-item label="地块代码" prop="dkbm">

  22.                 <el-input v-model="queryParams.dkbm" placeholder="请输入地块代码" clearable @keyup.enter.native="handleQuery"/>

  23.               </el-form-item>

  24.               <el-form-item label="地块名称" prop="dkmc">

  25.                 <el-input v-model="queryParams.dkmc" placeholder="请输入地块名称" clearable @keyup.enter.native="handleQuery"/>

  26.               </el-form-item>

  27.               <!--<el-form-item label="所有权性质" prop="syqxz">

  28.                 <el-select v-model="queryParams.syqxz" placeholder="请选择所有权性质" clearable>

  29.                   <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  30.                 </el-select>

  31.               </el-form-item>

  32.               <el-form-item label="地块类别" prop="dklb">

  33.                 <el-select v-model="queryParams.dklb" placeholder="请选择地块类别" clearable>

  34.                   <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  35.                 </el-select>

  36.               </el-form-item>

  37.               <el-form-item label="土地利用类型" prop="tdlylx">

  38.                 <el-select v-model="queryParams.tdlylx" placeholder="请选择土地利用类型" clearable>

  39.                   <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"/>

  40.                 </el-select>

  41.               </el-form-item>

  42.               <el-form-item label="地力等级" prop="dldj">

  43.                 <el-select v-model="queryParams.dldj" placeholder="请选择地力等级" clearable>

  44.                   <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  45.                 </el-select>

  46.               </el-form-item>

  47.               <el-form-item label="土地用途" prop="tdyt">

  48.                 <el-select v-model="queryParams.tdyt" placeholder="请选择土地用途" clearable>

  49.                   <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"/>

  50.                 </el-select>

  51.               </el-form-item>

  52.               <el-form-item label="基本农田" prop="sfjbnt">

  53.                 <el-select v-model="queryParams.sfjbnt" placeholder="请选择是否基本农田" clearable>

  54.                   <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>

  55.                 </el-select>

  56.               </el-form-item>-->

  57.               <el-form-item label="是账外地" prop="sfzwd">

  58.                 <el-select v-model="queryParams.sfzwd" placeholder="请选择是否账外地" clearable>

  59.                   <el-option v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.label" :value="dict.value"/>

  60.                 </el-select>

  61.               </el-form-item>

  62.               <el-form-item label="调查状态" prop="surveyStatus">

  63.                 <el-select v-model="queryParams.surveyStatus" placeholder="请选择调查状态" clearable>

  64.                   <el-option v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.label" :value="dict.value"/>

  65.                 </el-select>

  66.               </el-form-item>

  67.               <el-form-item label="级联代码" prop="importCode">

  68.                 <el-input v-model="queryParams.importCode" placeholder="请输入部门级联代码" clearable @keyup.enter.native="handleQuery"/>

  69.               </el-form-item>

  70.               <el-form-item>

  71.                 <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

  72.                 <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

  73.               </el-form-item>

  74.             </el-form>

  75. 

  76.             <el-row :gutter="10" class="mb8">

  77.               <el-col :span="1.5">

  78.                 <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['resource:land:add']">新增</el-button>

  79.               </el-col>

  80.               <!--

  81.               <el-col :span="1.5">

  82.                 <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['resource:land:edit']">修改</el-button>

  83.               </el-col>

  84.               <el-col :span="1.5">

  85.                 <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['resource:land:remove']">删除</el-button>

  86.               </el-col>

  87.               -->

  88.               <el-col :span="1.5">

  89.                   <el-button type="success" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['resource:land:import']">导入</el-button>

  90.               </el-col>

  91.               <el-col :span="1.5">

  92.                 <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['resource:land:export']">导出</el-button>

  93.               </el-col>

  94.               <el-col :span="1.5">

  95.                   <el-button type="info" plain icon="el-icon-printer" size="mini" @click="handlePrint()" v-hasPermi="['resource:land:print']">打印</el-button>

  96.               </el-col>

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

  98.             </el-row>

  99. 

  100.               <!-- 数据列表  列属性 min-width="60" show-overflow-tooltip  @selection-change="handleSelectionChange" -->

  101.             <el-table v-loading="loading" :data="landList" border>

  102.                 <!--<el-table-column type="selection" width="55" align="center" />-->

  103.               <el-table-column label="fid " align="center" prop="fid"  min-width="60"/>

  104.               <el-table-column label="地块代码" align="center" prop="dkbm" />

  105.               <el-table-column label="地块名称" align="center" prop="dkmc" />

  106.               <el-table-column label="所有权性质" align="center" prop="syqxz">

  107.                 <template slot-scope="scope">

  108.                   <dict-tag :options="dict.type.ownership_type" :value="scope.row.syqxz"/>

  109.                 </template>

  110.               </el-table-column>

  111.               <el-table-column label="地块类别" align="center" prop="dklb">

  112.                 <template slot-scope="scope">

  113.                   <dict-tag :options="dict.type.land_type" :value="scope.row.dklb"/>

  114.                 </template>

  115.               </el-table-column>

  116.               <el-table-column label="土地利用类型" align="center" prop="tdlylx">

  117.                 <template slot-scope="scope">

  118.                   <dict-tag :options="dict.type.land_use" :value="scope.row.tdlylx"/>

  119.                 </template>

  120.               </el-table-column>

  121.               <el-table-column label="地力等级" align="center" prop="dldj">

  122.                 <template slot-scope="scope">

  123.                   <dict-tag :options="dict.type.land_grade_type" :value="scope.row.dldj"/>

  124.                 </template>

  125.               </el-table-column>

  126.               <el-table-column label="土地用途" align="center" prop="tdyt">

  127.                 <template slot-scope="scope">

  128.                   <dict-tag :options="dict.type.land_use_type" :value="scope.row.tdyt"/>

  129.                 </template>

  130.               </el-table-column>

  131.               <el-table-column label="是否基本农田" align="center" prop="sfjbnt">

  132.                 <template slot-scope="scope">

  133.                   <dict-tag :options="dict.type.is_common" :value="scope.row.sfjbnt"/>

  134.                 </template>

  135.               </el-table-column>

  136.               <el-table-column label="地块东至" align="center" prop="dkdz" />

  137.               <el-table-column label="地块西至" align="center" prop="dkxz" />

  138.               <el-table-column label="地块南至" align="center" prop="dknz" />

  139.               <el-table-column label="地块北至" align="center" prop="dkbz" />

  140.               <el-table-column label="备注信息" align="center" prop="dkbzxx" />

  141.               <el-table-column label="指界人姓名" align="center" prop="zjrxm" />

  142.               <el-table-column label="实测面积( ㎡)" align="center" prop="scmj" />

  143.               <el-table-column label="实测面积" align="center" prop="scmjm" />

  144.               <el-table-column label="调查状态" align="center" prop="surveyStatus">

  145.                 <template slot-scope="scope">

  146.                   <dict-tag :options="dict.type.survey_status" :value="scope.row.surveyStatus"/>

  147.                 </template>

  148.               </el-table-column>

  149.               <el-table-column label="部门级联代码" align="center" prop="importCode" />

  150.               <el-table-column label="区域位置名称" align="center" prop="deptName" />

  151.               <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="250">

  152.                 <template slot-scope="scope">

  153.                   <el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)" v-hasPermi="['resource:land:query']">查看</el-button>

  154.                   <el-button size="mini" type="text" icon="el-icon-s-promotion" @click="handleMap(scope.row)" v-hasPermi="['resource:land:map']">地图</el-button>

  155.                   <el-dropdown size="mini" v-hasPermi="['resource:land:remove']">

  156.                     <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>

  157.                     <el-dropdown-menu slot="dropdown" style="padding: 5px">

  158.                       <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['resource:land:edit']">修改</el-button>

  159.                       <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['resource:land:remove']">删除</el-button>

  160.                     </el-dropdown-menu>

  161.                   </el-dropdown>

  162.                 </template>

  163.               </el-table-column>

  164.             </el-table>

  165. 

  166.             <!-- 分页插件 -->

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

  168. 

  169.           </el-col>

  170.         </pane>

  171.       </splitpanes>

  172.     </el-row>

  173. 

  174.      <!-- 导入EXCEL组件 -->

  175.       <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>

  176.           <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>

  177.               <i class="el-icon-upload"></i>

  178.               <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

  179.               <div class="el-upload__tip text-left" slot="tip">

  180.                   <div class="el-upload__tip" slot="tip">

  181.                       <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的地块属性

  182.                   </div>

  183.                   <p style="color: red">1、仅允许导入xls、xlsx格式文件；</p>

  184.                   <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>

  185.               </div>

  186.           </el-upload>

  187.           <div slot="footer" class="dialog-footer">

  188.               <el-button type="primary" @click="submitFileForm">确 定</el-button>

  189.               <el-button @click="upload.open = false">取 消</el-button>

  190.           </div>

  191.       </el-dialog>

  192. 

  193.       <!-- 查看地块属性对话框 -->

  194.       <el-dialog :title="title" :visible.sync="viewOpen" width="800px" append-to-body>

  195.         <el-descriptions title="地块信息" border :column="2" class="margin-top">

  196.           <el-descriptions-item label="区域位置名称">{{ form.deptName }}</el-descriptions-item>

  197.           <el-descriptions-item label="标识码">{{ form.bsm }}</el-descriptions-item>

  198.           <el-descriptions-item label="要素代码">{{ form.ysdm }}</el-descriptions-item>

  199.           <el-descriptions-item label="地块代码">{{ form.dkbm }}</el-descriptions-item>

  200.           <el-descriptions-item label="地块名称">{{ form.dkmc }}</el-descriptions-item>

  201.           <el-descriptions-item label="所有权性质">{{ form.syqxz }}</el-descriptions-item>

  202.           <el-descriptions-item label="地块类别">{{ form.dklb }}</el-descriptions-item>

  203.           <el-descriptions-item label="土地利用类型">{{ form.tdlylx }}</el-descriptions-item>

  204.           <el-descriptions-item label="地力等级">{{ form.dldj }}</el-descriptions-item>

  205.           <el-descriptions-item label="土地用途">{{ form.tdyt }}</el-descriptions-item>

  206.           <el-descriptions-item label="是否基本农田">{{ form.sfjbnt }}</el-descriptions-item>

  207.           <el-descriptions-item label="地块东至">{{ form.dkdz }}</el-descriptions-item>

  208.           <el-descriptions-item label="地块西至">{{ form.dkxz }}</el-descriptions-item>

  209.           <el-descriptions-item label="地块南至">{{ form.dknz }}</el-descriptions-item>

  210.           <el-descriptions-item label="地块北至">{{ form.dkbz }}</el-descriptions-item>

  211.           <el-descriptions-item label="备注信息">{{ form.dkbzxx }}</el-descriptions-item>

  212.           <el-descriptions-item label="指界人姓名">{{ form.zjrxm }}</el-descriptions-item>

  213.           <el-descriptions-item label="实测面积(㎡)">{{ form.scmj }}</el-descriptions-item>

  214.           <el-descriptions-item label="实测面积(亩)">{{ form.scmjm }}</el-descriptions-item>

  215.           <el-descriptions-item label="是否账外地">{{ form.sfzwd }}</el-descriptions-item>

  216.         </el-descriptions>

  217. 

  218.         <el-descriptions title="经营数据" border :column="2" class="margin-top">

  219.           <el-descriptions-item label="经营面积(亩)">{{ form.jymj }}</el-descriptions-item>

  220.           <el-descriptions-item label="经营方式">{{ form.jyfs }}</el-descriptions-item>

  221.           <el-descriptions-item label="经营对象名称">{{ form.jydxmc }}</el-descriptions-item>

  222.           <el-descriptions-item label="经营开始时间">{{ form.jykssj }}</el-descriptions-item>

  223.           <el-descriptions-item label="经营结束时间">{{ form.jyjssj }}</el-descriptions-item>

  224.           <el-descriptions-item label="承包金额(元)">{{ form.cbje }}</el-descriptions-item>

  225.           <el-descriptions-item label="备注">{{ form.bz }}</el-descriptions-item>

  226.           <el-descriptions-item label="调查状态">{{ form.surveyStatus }}</el-descriptions-item>

  227.           <el-descriptions-item label="实物图">

  228.             <div v-if="!!form.dkImg">

  229.               <el-tooltip effect="light" :content="item" placement="bottom" v-for="(item, index) in form.dkImg.split(',')" :key="index">

  230.                 <el-image style="height: 64px; width: 64px; margin: 2px; display: inline-block;" fit="scale-down" :src="this.baseRoutingUrll + item" :preview-src-list="form.dkImg.split(',').map((x) => this.baseRoutingUrll + x)"/>

  231.               </el-tooltip>

  232.             </div>

  233.           </el-descriptions-item>

  234.         </el-descriptions>

  235. 

  236.           <!-- 弹框操作按钮 -->

  237.          <div slot="footer" class="dialog-footer">

  238.              <el-button @click="doPrint">打 印</el-button>

  239.              <el-button @click="cancelDetail">关 闭</el-button>

  240.          </div>

  241.       </el-dialog>

  242. 

  243.     <!-- 添加或修改地块属性对话框 -->

  244.     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>

  245.       <el-form ref="form" :model="form" :rules="rules" label-width="100px">

  246. 

  247.         <el-form-item label="区域位置" prop="deptName">

  248.           <el-input v-model="form.deptName" placeholder="请输入区域位置名称"  show-word-limit :maxlength="100"/>

  249.         </el-form-item>

  250.         <el-form-item label="地块代码" prop="dkbm">

  251.             <el-input v-model="form.dkbm" placeholder="地块代码不输入时，系统自动分配"  show-word-limit :maxlength="19"/>

  252.         </el-form-item>

  253.         <el-form-item label="地块名称" prop="dkmc">

  254.             <el-input v-model="form.dkmc" placeholder="请输入地块名称"  show-word-limit :maxlength="50"/>

  255.         </el-form-item>

  256.         <el-form-item label="所有权性质" prop="syqxz">

  257.           <el-select v-model="form.syqxz" placeholder="请选择所有权性质">

  258.             <el-option v-for="dict in dict.type.ownership_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  259.           </el-select>

  260.         </el-form-item>

  261.         <el-form-item label="地块类别" prop="dklb">

  262.           <el-select v-model="form.dklb" placeholder="请选择地块类别">

  263.             <el-option v-for="dict in dict.type.land_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  264.           </el-select>

  265.         </el-form-item>

  266.         <el-form-item label="土地利用类型" prop="tdlylx">

  267.           <el-select v-model="form.tdlylx" placeholder="请选择土地利用类型">

  268.             <el-option v-for="dict in dict.type.land_use" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  269.           </el-select>

  270.         </el-form-item>

  271.         <el-form-item label="地力等级" prop="dldj">

  272.           <el-select v-model="form.dldj" placeholder="请选择地力等级">

  273.             <el-option v-for="dict in dict.type.land_grade_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  274.           </el-select>

  275.         </el-form-item>

  276.         <el-form-item label="土地用途" prop="tdyt">

  277.           <el-select v-model="form.tdyt" placeholder="请选择土地用途">

  278.             <el-option v-for="dict in dict.type.land_use_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>

  279.           </el-select>

  280.         </el-form-item>

  281.         <el-form-item label="是否基本农田" prop="sfjbnt">

  282.           <el-radio-group v-model="form.sfjbnt">

  283.             <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  284.           </el-radio-group>

  285.         </el-form-item>

  286.         <el-form-item label="地块东至" prop="dkdz">

  287.             <el-input v-model="form.dkdz" placeholder="请输入地块东至"  show-word-limit :maxlength="50"/>

  288.         </el-form-item>

  289.         <el-form-item label="地块西至" prop="dkxz">

  290.             <el-input v-model="form.dkxz" placeholder="请输入地块西至"  show-word-limit :maxlength="50"/>

  291.         </el-form-item>

  292.         <el-form-item label="地块南至" prop="dknz">

  293.             <el-input v-model="form.dknz" placeholder="请输入地块南至"  show-word-limit :maxlength="50"/>

  294.         </el-form-item>

  295.         <el-form-item label="地块北至" prop="dkbz">

  296.             <el-input v-model="form.dkbz" placeholder="请输入地块北至"  show-word-limit :maxlength="50"/>

  297.         </el-form-item>

  298.         <el-form-item label="备注信息" prop="dkbzxx">

  299.             <el-input v-model="form.dkbzxx" placeholder="请输入备注信息"  show-word-limit :maxlength="254"/>

  300.         </el-form-item>

  301.         <el-form-item label="指界人姓名" prop="zjrxm">

  302.             <el-input v-model="form.zjrxm" placeholder="请输入指界人姓名"  show-word-limit :maxlength="100"/>

  303.         </el-form-item>

  304.         <el-form-item label="实测面积( ㎡)" prop="scmj">

  305.             <el-input-number v-model="form.scmj" placeholder="请输入实测面积( ㎡)" controls-position="right"   :precision="2"/>

  306.         </el-form-item>

  307.         <el-form-item label="实测面积" prop="scmjm">

  308.             <el-input-number v-model="form.scmjm" placeholder="请输入实测面积" controls-position="right"   :precision="3"/>

  309.         </el-form-item>

  310.         <el-form-item label="是否账外地" prop="sfzwd">

  311.           <el-radio-group v-model="form.sfzwd">

  312.             <el-radio v-for="dict in dict.type.is_common" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  313.           </el-radio-group>

  314.         </el-form-item>

  315.         <el-form-item label="调查状态" prop="surveyStatus">

  316.           <el-radio-group v-model="form.surveyStatus">

  317.             <el-radio v-for="dict in dict.type.survey_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>

  318.           </el-radio-group>

  319.         </el-form-item>

  320. 

  321.       </el-form>

  322.       <div slot="footer" class="dialog-footer">

  323.         <el-button type="primary" @click="submitForm">确 定</el-button>

  324.         <el-button @click="cancel">取 消</el-button>

  325.       </div>

  326.     </el-dialog>

  327.   </div>

  328. </template>

  329. 

  330. <script>

  331. import { listLand, getLand, getLandDetail, getLandDetailByDkbm, delLand, addLand, updateLand, printLand } from "@/api/resource/land"

  332. import { getToken } from "@/utils/auth"

  333. import Treeselect from "@riophae/vue-treeselect";

  334. import { Splitpanes, Pane } from "splitpanes"

  335. import "@riophae/vue-treeselect/dist/vue-treeselect.css"

  336. import "splitpanes/dist/splitpanes.css"

  337. import { deptTreeSelect } from "@/api/system/user"

  338. 

  339. export default {

  340.   name: "Land",

  341.   dicts: ['ownership_type', 'land_use_type', 'survey_status', 'is_common', 'land_grade_type', 'land_type', 'land_use'],

  342.   components: { Treeselect, Splitpanes, Pane },

  343.   data() {

  344.     return {

  345.       // 遮罩层

  346.       loading: true,

  347.       // 导出遮罩层

  348.       exportLoading: false,

  349.       // 选中数组

  350.       ids: [],

  351.       // 非单个禁用

  352.       single: true,

  353.       // 非多个禁用

  354.       multiple: true,

  355.       // 显示搜索条件

  356.       showSearch: true,

  357.       // 总条数

  358.       total: 0,

  359.       // 地块属性表格数据

  360.       landList: [],

  361.       // 弹出层标题

  362.       title: "",

  363.       // 是否显示弹出层

  364.       open: false,

  365.       // 详情组件列数

  366.       descColumn: 2,

  367.       // 详情组件Label所占百分比, 最大={100 / descColumn}. 内容所占百分比={100 / descColumn - descLabelWidth}

  368.       descLabelWidth: 15,

  369.       // 对话框显示只读的详情

  370.       viewOpen: false,

  371.       // 项目路径

  372.       baseRoutingUrll: process.env.VUE_APP_BASE_API,

  373.       // 所有部门树选项

  374.       deptOptions: undefined,

  375.       // 过滤掉已禁用部门树选项

  376.       enabledDeptOptions: undefined,

  377.       // 筛选部门名称

  378.       deptName: undefined,

  379.       // 选中的部门

  380.       selectDeptName: null,

  381.       defaultProps: {

  382.         children: "children",

  383.         label: "label"

  384.       },

  385.       // 查询参数

  386.       queryParams: {

  387.         pageNum: 1,

  388.         pageSize: 10,

  389.        // 查询排序

  390.        //orderByColumn: "id",

  391.        //isAsc: "desc",

  392.        // 翻译字典

  393.        //toTranslateDict: "1",

  394.         dkbm: null,

  395.         dkmc: null,

  396.         syqxz: null,

  397.         dklb: null,

  398.         tdlylx: null,

  399.         dldj: null,

  400.         tdyt: null,

  401.         sfjbnt: null,

  402.         surveyStatus: null,

  403.         importCode: null,

  404.         sfzwd: null,

  405.       },

  406.       // 表单参数

  407.       form: {},

  408.       // 表单校验

  409.       rules: {

  410.         dkmc: [

  411.           { required: true, message: "地块名称不能为空", trigger: "blur" }

  412.         ],

  413.         scmjm: [

  414.           { required: true, message: "实测面积不能为空", trigger: "blur" }

  415.         ],

  416. 

  417.       },

  418.       // EXCEL导入

  419.       upload: {

  420.           // 是否显示弹出层（用户导入）

  421.           open: false,

  422.           // 弹出层标题（用户导入）

  423.           title: "",

  424.           // 是否禁用上传

  425.           isUploading: false,

  426.           // 是否更新已经存在的用户数据

  427.           updateSupport: 0,

  428.           // 设置上传的请求头部

  429.           headers: { Authorization: "Bearer " + getToken() },

  430.           // 上传的地址

  431.           url: process.env.VUE_APP_BASE_API + "/resource/land/importData"

  432.       },

  433. 

  434.     }

  435.   },

  436.   watch: {

  437.     // 根据名称筛选部门树

  438.     deptName(val) {

  439.       this.$refs.tree.filter(val)

  440.     }

  441.   },

  442.   created() {

  443.     this.getDeptTree()

  444.     this.getList()

  445.   },

  446.   methods: {

  447.     /** 查询地块属性列表 */

  448.     getList() {

  449.       this.loading = true

  450.       listLand(this.queryParams).then(response => {

  451.         this.landList = response.rows

  452.         this.total = response.total

  453.         this.loading = false

  454.       })

  455.     },

  456.     // 取消按钮

  457.     cancel() {

  458.       this.open = false

  459.       this.reset()

  460.     },

  461.     cancelDetail() {

  462.         this.viewOpen = false

  463.     },

  464.     // 表单重置

  465.     reset() {

  466.       this.form = {

  467.         bsm: null,

  468.         ysdm: '211011',

  469.         dkbm: null,

  470.         dkmc: null,

  471.         syqxz: '30',

  472.         dklb: '22',

  473.         tdlylx: '011',

  474.         dldj: '01',

  475.         tdyt: '1',

  476.         sfjbnt: '1',

  477.         dkdz: null,

  478.         dkxz: null,

  479.         dknz: null,

  480.         dkbz: null,

  481.         dkbzxx: null,

  482.         zjrxm: null,

  483.         scmj: null,

  484.         scmjm: null,

  485.         theGeom: null,

  486.         surveyStatus: '1',

  487.         importCode: null,

  488.         deptName: null,

  489.         sfzwd: '2'

  490.       }

  491.       this.resetForm("form")

  492.     },

  493.     /** 搜索按钮操作 */

  494.     handleQuery() {

  495.       this.queryParams.pageNum = 1

  496.       this.getList()

  497.     },

  498.     /** 重置按钮操作 */

  499.     resetQuery() {

  500.       this.resetForm("queryForm")

  501.       this.handleQuery()

  502.     },

  503.     // 多选框选中数据

  504.     handleSelectionChange(selection) {

  505.       this.ids = selection.map(item => item.fid)

  506.       this.single = selection.length!==1

  507.       this.multiple = !selection.length

  508.     },

  509.     /** 新增按钮操作 */

  510.     handleAdd() {

  511.       if(this.selectDeptName == null || this.selectDeptName == ''){

  512.         this.$modal.msgWarning("请先选择村/组行政区划！")

  513.         return

  514.       }

  515.       this.reset()

  516.       this.form.deptId = this.queryParams.deptId;

  517.       this.form.deptName = this.selectDeptName;

  518.       this.open = true

  519.       this.title = "添加地块属性"

  520.     },

  521.     /** 修改按钮操作 */

  522.     handleUpdate(row) {

  523.       this.reset()

  524.       const fid = row.fid || this.ids

  525.       getLand(fid).then(response => {

  526.         this.form = response.data

  527.         this.open = true

  528.         this.title = "修改地块属性"

  529.       })

  530.     },

  531.     /** 查看按钮操作 */

  532.     handleLook(row) {

  533.       getLandDetailByDkbm(row.dkbm).then(response => {

  534.           this.form = response.data;

  535.           this.viewOpen = true;

  536.           this.title = "查看地块属性";

  537.       });

  538.     },

  539.     /** 提交按钮 */

  540.     submitForm() {

  541.       this.$refs["form"].validate(valid => {

  542.         if (valid) {

  543.           if (this.form.fid != null) {

  544.             updateLand(this.form).then(response => {

  545.               this.$modal.msgSuccess("修改成功")

  546.               this.open = false

  547.               this.getList()

  548.             })

  549.           } else {

  550.             addLand(this.form).then(response => {

  551.               this.$modal.msgSuccess("新增成功")

  552.               this.open = false

  553.               this.getList()

  554.             })

  555.           }

  556.         }

  557.       })

  558.     },

  559.     /** 删除按钮操作 */

  560.     handleDelete(row) {

  561.       const fids = row.fid || this.ids

  562.       this.$modal.confirm('是否确认删除地块属性编号为"' + fids + '"的数据项？').then(function() {

  563.         return delLand(fids)

  564.       }).then(() => {

  565.         this.getList()

  566.         this.$modal.msgSuccess("删除成功")

  567.       }).catch(() => {})

  568.     },

  569.     /** 导出按钮操作 */

  570.     handleExport() {

  571.       this.download('resource/land/export', {

  572.         ...this.queryParams

  573.       }, `地块属性_${new Date().getTime()}.xlsx`)

  574.     },

  575.     /** 打印表单 */

  576.     doPrint() {

  577.         const originalTitle = document.title;

  578.         try {

  579.             document.title = this.title || '打印详情';

  580.             const printElement = document.getElementById('printDetail');

  581.             const printFrame = document.createElement('iframe');

  582.             printFrame.style.position = 'absolute';

  583.             printFrame.style.width = '0';

  584.             printFrame.style.height = '0';

  585.             printFrame.style.border = 'none';

  586.             printFrame.style.left = '-9999px';

  587.             printFrame.onload = function() {

  588.                 try {

  589.                     const frameDoc = printFrame.contentDocument || printFrame.contentWindow.document;

  590.                     const contentClone = printElement.cloneNode(true);

  591.                     const style = document.createElement('style');

  592.                     style.innerHTML = `

  593.                       @page {

  594.                         size: auto;

  595.                         margin: 10mm;

  596.                       }

  597.                       body {

  598.                         font-family: Arial, sans-serif;

  599.                         line-height: 1.5;

  600.                         margin: 0;

  601.                         padding: 0;

  602.                       }

  603.                       .el-descriptions {

  604.                         width: 100% !important;

  605.                       }

  606.                       .el-descriptions-item__label {

  607.                         width: ${this.descLabelWidth}% !important;

  608.                       }

  609.                       .el-descriptions-item__content {

  610.                         width: ${(100 / this.descColumn) - this.descLabelWidth}% !important;

  611.                       }

  612.                       /* 确保图片在打印时显示完整 */

  613.                       img, .el-image {

  614.                         max-width: 100% !important;

  615.                         height: auto !important;

  616.                       }

  617.                     `;

  618.                     frameDoc.head.appendChild(style);

  619.                     frameDoc.body.appendChild(contentClone);

  620.                     setTimeout(() => {

  621.                         printFrame.contentWindow.focus();

  622.                         printFrame.contentWindow.print();

  623.                         setTimeout(() => {

  624.                             document.body.removeChild(printFrame);

  625.                             document.title = originalTitle;

  626.                         }, 1000);

  627.                     }, 500);

  628.                 } catch (e) {

  629.                     document.body.removeChild(printFrame);

  630.                     document.title = originalTitle;

  631.                     this.$message.error('打印过程中发生错误');

  632.                 }

  633.             };

  634.             document.body.appendChild(printFrame);

  635.         } catch (e) {

  636.             document.title = originalTitle;

  637.             this.$message.error('打印过程中发生错误');

  638.         }

  639.     },

  640.     /** 打印按钮操作 */

  641.     handlePrint() {

  642.         printLand(this.queryParams).then(response => {})

  643.     },

  644.     /* 导入EXCEL组件 */

  645.     handleImport() {

  646.         this.upload.title = "地块属性导入"

  647.         this.upload.open = true

  648.     },

  649.     /** 下载模板操作 */

  650.     importTemplate() {

  651.         this.download('resource/land/importTemplate', {

  652.         }, `地块属性_template.xlsx`)

  653.     },

  654.     // 文件上传中处理

  655.     handleFileUploadProgress(event, file, fileList) {

  656.         this.upload.isUploading = true

  657.     },

  658.     // 文件上传成功处理

  659.     handleFileSuccess(response, file, fileList) {

  660.         this.upload.open = false

  661.         this.upload.isUploading = false

  662.         this.$refs.upload.clearFiles()

  663.         this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true })

  664.         this.getList()

  665.     },

  666.     // 提交上传文件

  667.     submitFileForm() {

  668.         this.$refs.upload.submit()

  669.     },

  670.     /** 查询部门下拉树结构 */

  671.     getDeptTree() {

  672.       deptTreeSelect().then(response => {

  673.         this.deptOptions = response.data

  674.         this.enabledDeptOptions = this.filterDisabledDept(JSON.parse(JSON.stringify(response.data)))

  675.       })

  676.     },

  677.     // 过滤禁用的部门

  678.     filterDisabledDept(deptList) {

  679.       return deptList.filter(dept => {

  680.         if (dept.disabled) {

  681.           return false

  682.         }

  683.         if (dept.children && dept.children.length) {

  684.           dept.children = this.filterDisabledDept(dept.children)

  685.         }

  686.         return true

  687.       })

  688.     },

  689.     // 筛选节点

  690.     filterNode(value, data) {

  691.       if (!value) return true

  692.       return data.label.indexOf(value) !== -1

  693.     },

  694.     // 节点单击事件

  695.     handleNodeClick(data) {

  696.       this.queryParams.deptId = data.id

  697.       this.selectDeptName = data.label

  698.       this.handleQuery()

  699.     },

  700. 

  701.   }

  702. }

  703. </script>

  704. <style scoped type="scss">

  705.   .container_main{

  706.     height: 75vh;

  707.     overflow-y: scroll;

  708.   }

  709. </style>