soc_web/src/views/core/outIn/outInLog/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--机构数据-->
      <!-- <el-col :span="4" :xs="24">
        <org-tree
          v-model="queryParams.orgId"
          @defaultKey="getDefaultKey"
          @checkChange="checkChange"
          @click="clickTreeNode"
          :defaultCheckSub="true"
        ></org-tree>
      </el-col> -->
      <!--搜索栏-->
      <el-col :span="24" :xs="24">
        <div class="main-right-box">
          <div class="main-search-box">
            <el-form
              :model="queryParams"
              ref="queryForm"
              size="small"
              :inline="true"
              v-show="showSearch"
            >
              <!-- <el-form-item label="介绍信编号" prop="letterNo">
                <el-input
                  v-model="queryParams.letterNo"
                  placeholder="请输入关键字"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item> -->
              <el-form-item label="接待机构">
                <org-tree
                  v-model="queryParams.orgId"
                  @defaultKey="getDefaultKey"
                  @checkChange="checkChange"
                  @click="clickTreeNode"
                  :defaultCheckSub="true"
                  ref="orgTree"
                ></org-tree>
              </el-form-item>
              <el-form-item label="来访人员" prop="userName">
                <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入关键字"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="介绍信类型" prop="type">
                <el-select
                  v-model="queryParams.type"
                  placeholder="请选择介绍信类型"
                  clearable
                >
                  <el-option
                    v-for="dict in dict.type.out_in_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="searchTitle" prop="rangen" label="出入时间">
                <DataRangePicker
                  v-model="queryParams.range"
                  key="daterange"
                  type="daterange"
                />
              </el-form-item>
            </el-form>

            <el-row :gutter="10">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="handleQuery"
                >搜索
                </el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                >重置
                </el-button
                >
              </el-col>
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
              ></right-toolbar>
            </el-row>
          </div>
          <el-table
            v-loading="loading"
            height="646"
            border
            size="small"
            :data="outInRecrodList"
          >
            <el-table-column
              label="来访单位"
              prop="companyName"
              align="center"
              width="180"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="来访人员"
              prop="userName"
              align="center"
              width="180"
              :show-overflow-tooltip="true"
            />

            <!-- <el-table-column label="证件类型" prop="idType"  align="center"  width="180" >
            <template slot-scope="scope">
                    <dict-tag :options="dict.type.letter_id_type" :value="scope.row.idType"/>
                  </template>
          </el-table-column> -->
            <el-table-column
              label="证件号码"
              prop="idCard"
              align="center"
              width="180"
            />

            <el-table-column
              label="介绍信类型"
              align="center"
              prop="letterType"
              width="110"
            >
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.out_in_type"
                  :value="scope.row.letterType"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="来访事由"
              align="center"
              :show-overflow-tooltip="true"
              width="250"
              prop="letterReasons"
            />
            <el-table-column
              label="地区"
              align="center"
              prop="affiliatedArea"
              width="180"
            >
            </el-table-column>
            <el-table-column
              label="行社名称"
              align="center"
              prop="affiliatedBank"
              width="180"
            >
            </el-table-column>
            <el-table-column
              label="接待机构"
              align="center"
              prop="orgName"
              width="180"
            >
            </el-table-column>
            <el-table-column
              label="出入时间"
              align="center"
              width="420"
            >
              <template v-if="scope.row.arrivalTime || scope.row.departureTime" slot-scope="scope">
                <span v-if="scope.row.arrivalTime"
                >{{
                    dayjs(scope.row.arrivalTime).format(
                      "YYYY年MM月DD日HH时mm分"
                    )
                  }}
                  ~
                </span>
                <span v-if="scope.row.departureTime">{{
                    dayjs(scope.row.departureTime).format(
                      "YYYY年MM月DD日HH时mm分"
                    )
                  }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="核验结果" width="250" align="center" prop="checkImage">
                    <template slot-scope="scope">
                      <ImageListPreview v-model="scope.row.imgFile"></ImageListPreview>
                    </template> </el-table-column>
            <el-table-column label="介绍信" align="center" width="250">
              <template slot-scope="scope">
              <template v-if="scope.row.letterFile">
                <K-file-upload ref="upload" :isShowUploadBtn="false"
                                              :defaultValue="scope.row.letterFile"
                                              />
                  </template>
          </template>
          </el-table-column> -->

            <el-table-column
              label="操作"
              align="center"
              width="210"
              fixed="right"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleDetailInfo(scope.row)"
                  v-hasPermi="['core:record:list']"
                >详情
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-document"
                  v-if="scope.row.pdfUrl"
                  @click="onDown(scope.row.pdfUrl)"
                >来访登记簿
                </el-button>
              </template>

            </el-table-column>
          </el-table>

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

          <dialog-out-in-detail
            ref="dialogDetail"
            @success="handleQuery(true)"
          ></dialog-out-in-detail>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {outInRecordList} from "@/api/core/letter";
import KFileUpload from "@/components/K-FileUpload/index.vue";
import dayjs from "dayjs";
import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
import dialogOutInDetail from "./dialog.outIn.detail.vue";
import {mapGetters} from "vuex";
import {imageUrl} from "@/utils/ruoyi";

export default {
  components: {OrgTree, KFileUpload, DataRangePicker, dialogOutInDetail},
  dicts: ["letter_status", "out_in_type"],
  name: "outInLog",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个停用
      single: true,
      // 非多个停用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 出入记录数据
      outInRecrodList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        checkSub: true,
        userName: null,
        type: null,
        range: [],
        orgId: this.$store.getters.orgId,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters(["orgId"]),
  },
  methods: {
    dayjs,
    /** 查询介绍信列表 */
    getList() {
      this.loading = true;
      outInRecordList(this.queryParams).then((response) => {
        this.outInRecrodList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.orgId = this.orgId;
      this.queryParams.checkSub = true;
      this.$refs["orgTree"].setCheckSub(this.queryParams.checkSub)
      this.queryParams.range = ['',''];
      this.handleQuery();
    },
    getDefaultKey(key) {
      this.queryParams.orgId = key;
      this.getList();
    },
    //单选框状态改变
    checkChange(state) {
      this.queryParams.checkSub = state;
      this.handleQuery();
    },
    // 节点单击事件
    clickTreeNode(data) {
      // this.initPlanRoleList();
      this.queryParams.orgId = data.id;
      this.handleQuery();
    },
    handleDetailInfo(row) {
      this.$refs["dialogDetail"].show(row.id);
    },
    async onDown(pdfUrl) {
      // const data = await this.$api.eduTraining.predown(id);
      window.open(imageUrl(pdfUrl));
    },
  },
};
</script>