dvcp_v2_webapp/packages/jianping/AppHelpedResident/detail/hrLog.vue

<template>
  <section class="hrLog">
    <ai-card title="走访日志">
      <template #right>
        <!-- <ai-select placeholder="档案状态" v-model="search.status" :selectList="dict.getDict('fpPrtpStatus')" @change="page.current=1,getTableData()"/> -->
        <el-button type="text" icon="el-icon-plus" @click="dialog=true" v-if="$permissions('app_apppreventionreturntopovertylog_edit')">添加</el-button>
      </template>
      <template #content>
        <div class="logItem" v-for="row in tableData" :key="row.id">
          <el-row type="flex" align="middle" justify="space-between">
            <b v-text="row.createUserName"/>
            <span v-text="row.createTime"/>
          </el-row>
          <p>操作类型：{{row.operationDesc}}</p>
          <div class="content" v-text="row.detail"/>
          <ai-uploader v-model="row.files" disabled/>
          <div class="btns">
            <el-button type="text" @click="handleEdit(row)" v-if="$permissions('app_apppreventionreturntopovertylog_edit')">编辑</el-button>
            <el-button type="text" @click="handleDelete(row.id)" v-if="$permissions('app_apppreventionreturntopovertylog_del')">删除</el-button>
          </div>
        </div>
        <ai-empty v-if="tableData.length==0"/>
      </template>
    </ai-card>
    <ai-dialog :visible.sync="dialog" :title="addTitle" @closed="form={}" @onConfirm="submit" width="600px">
      <el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="80px">
        <el-form-item label="走访日志" prop="detail">
          <el-input type="textarea" v-model="form.detail" placeholder="请输入" maxlength="500" show-word-limit rows="5"/>
        </el-form-item>
        <el-form-item label="图片" prop="files">
          <ai-uploader v-model="form.files" :instance="instance" acceptType=".jpg,.jpeg,.png">
            <template #tips>
              最多9张,仅支持10M以内的jpg、jpeg、png格式照片
            </template>
          </ai-uploader>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "hrLog",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    addTitle() {
      return this.form.id ? "编辑走访日志" : "新建走访日志"
    }
  },
  data() {
    return {
      dialog: false,
      form: {},
      rules: {
        detail: {required: true, message: "请输入走访日志"}
      },
      tableData: []
    }
  },
  methods: {
    getTableData() {
      let {id: pid} = this.$route.query
      this.instance.post("/app/apppreventionreturntopovertylog/list", null, {
        params: {size: 9999, pid, type: 0}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records || []
        }
      })
    },
    submit() {
      this.$refs.DialogForm.validate(v => {
        if (v) {
          let {id: pid} = this.$route.query
          this.instance.post(`/app/apppreventionreturntopovertylog/addOrUpdate`, {
            ...this.form,
            pid,
            type: 0
          }).then(res => {
            if (res.code == 0) {
              this.form = {}
              this.$message.success('提交成功!');
              this.dialog = false
              this.getTableData()
            }
          })
        }
      })
    },
    handleEdit(row) {
      this.dialog = true
      this.form = JSON.parse(JSON.stringify(row))
    },
    handleDelete(ids) {
      this.$confirm("是否要删除走访日志").then(() => {
        this.instance.post("/app/apppreventionreturntopovertylog/delete", null, {
          params: {ids: ids?.toString()}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.hrLog {
  .logItem {
    position: relative;
    padding: 8px 16px;
    border-radius: 4px;

    &:hover {
      background: #eee;

      .btns {
        display: block;
      }
    }

    .content {
      margin: 8px 0;
    }

    .btns {
      display: none;
      position: absolute;
      right: 8px;
      bottom: 8px;
    }
  }
}
</style>