agmp_wpr_vue/src/views/peasantHouseholdManage/components/farmerManagement.vue

<template>
  <el-dialog
    title="农户信息"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
    width="800px"
  >
  <div>
    <h2>农户基础信息</h2>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label">
              <span>
                行政区
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <span>{{ detailsData.cusareaName }}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label no_left_border">
              <span>
                农户姓名
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <span>{{ detailsData.farmerName }}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label">
              <span>
                身份证号
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <span>{{ detailsData.farmerIdcard }}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label no_left_border">
              <span>
                手机号
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <span>{{ detailsData.farmerPhone }}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label">
              <span>
                种植面积
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <span>{{detailsData.farmerAreasize || 0}}亩</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label no_left_border">
              <span>
                水权数量
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content">
              <span>{{detailsData.farmerWramount}}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label_last">
              <span>
                剩余水权
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content_last">
              <span>{{ detailsData.farmerWrbalance }}</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row>
          <el-col :span="6">
            <div class="label_last no_left_border">
              <span>
                
              </span>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="content_last">
              <span></span>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <div>
    <h3>用水卡信息</h3>
    <b-table
    ref="tableRef"
    :args="{ 'highlight-current-row': true }"
    :data="loadData"
    :columns="columns"
    isShowIndex
    :showPagination="false"
  >
    <template #styleImg="scope">
      <el-image
        :src="scope.row.imgPreview"
        :preview-src-list="[scope.row.imgPreview]"
        slot="error"
        class="image-slot"
        style="width: 100px; height: 50px"
      >
        <div slot="error" class="image-slot"></div>
      </el-image>
    </template>
    <template #codeNo="scope">
      <el-link
        type="primary"
        :underline="false"
        @click="goDetail(scope.row)"
        >{{ scope.row.traceCodeApplyConcat }}</el-link
      >
    </template>
    <template #status="scope">
      <span style="display:flex;align-items:center;justify-content:center">
        <!-- <span class="status"></span> -->
        {{ scope.row.cardStatusContent }}
      </span>
    </template>
    <template #cardAmount="scope">
      <span style="display:flex;align-items:center;justify-content:center">
        <!-- <span class="status"></span> -->
        {{ Number(scope.row.cardAmount || 0).toFixed(2) }}
      </span>
    </template>
    
    <template #useNumber="scope">
      {{ scope.row.useNumber + '/' + scope.row.totalNumber }}
    </template>
    <template #finishGoodName="scope">
      {{ scope.row.finishGoodName&&scope.row.finishgoodNo?scope.row.finishGoodName + '-' + scope.row.finishgoodNo:'' }}
    </template>
  </b-table>
  </div>
  <div style="text-align: right;margin-top: 20px">
    <el-button type="info" plain @click="resetForm('baseForm')"
      >取消</el-button
    >
    <el-button
      type="primary"
      style="margin-left:16px;"
      @click="submitForm('baseForm')"
      :disabled="dialogSubmitLoading"
      :loading="dialogSubmitLoading"
      >确定</el-button
    >
  </div>
  </el-dialog>
</template>

<script>
import BTable from '@/components/Table/index.vue';
import { assign, omit } from 'lodash-es';
import { UPLOAD_TYPE_MAP } from '@/utils/constants';

export default {
  name: 'farmerManagement',
  props: {
    data: {
      default() {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    detailsData: {
      type: Object,
      default: () => {}
    }
  },
  components:{
    BTable
  },
  data() {
    return {
      imageUploadType: UPLOAD_TYPE_MAP.FARMING_RECORD,
      dialogSubmitLoading: false,
      dialogVisible: false,
      textarea: '',
      baseForm: {
        productValue: '',
        productName: '',
        stockAmount: '',
        goodsUnit: '',
        goodsSpecValue: '',
        imageArr1: [],
        supplierId: '',
        imageArr2: []
      },
      productList: [],
      syinfoList: [],
      processList: [],
      hasFetched: false,
      landList: [], //基地列表
      rules: {
        stockAmount: [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        sourceinfoId: [
          { required: true, message: '请选择管辖范围', trigger: 'blur' }
        ],
        productName: [
          { required: true, message: '请输入协会名称', trigger: 'blur' }
        ],
        supplierId: [
          { required: false, message: '请输入协会介绍', trigger: 'blur' }
        ],
        goodsSpecValue: [
          { required: true, message: '请选择规格', trigger: 'blur' }
        ]
      },
      columns: [
        {
          label: '卡号',
          prop: 'cardNo',
          customRender: '',
          align: 'center'
        },
        {
          label: '卡状态',
          prop: 'cardStatus',
          customRender: 'status',
          align: 'center'
        },
        {
          label: '卡余额',
          prop: 'cardAmount',
          customRender: 'cardAmount',
          align: 'center'
        }
      ]
    };
  },
  watch: {
    visible(val) {
      if (val !== this.dialogVisible) {
        this.dialogVisible = val;
        if (val) {
          assign(this.baseForm, this.data);
          if (!this.hasFetched) {
            this.hasFetched = true;
          }
        }
      }
    },
    data: {
      deep: true,
      handler(val) {
        assign(this.baseForm, val);
      }
    },
    detailsData: {
      deep: true,
      handler(val) {
        this.$refs.tableRef.refresh(true);
      }
    }
  },
  methods: {
    loadData() {
      return this.getTableData();
    },
    getTableData() {
      return Promise.resolve({
        data: this.detailsData?.cardList || []
      })
    },
    resetForm(formName) {
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.dialogVisible = false;
    },

    handleClose() {
      this.$emit('update:visible', false);
      this.resetForm('baseForm');
    },
  }
};
</script>

<style lang="scss" scoped>
.label{
  width: 100%;
  padding: 10px 0;
  border:1px solid rgb(187, 187, 187);
  border-bottom:0;
  text-align: center;
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  span{
    padding-left:5px;
  }
}
.content{
  width:100%;
  padding: 10px 0;
  border:1px solid rgb(187, 187, 187);
  border-bottom:0;
  border-left:0;
  span{
    padding-left:15px;
  }
}
.label_last{
  width: 100%;
  padding: 10px 0;
  text-align: center;
  border:1px solid rgb(187, 187, 187);
  color: #666666;
  font-size: 14px;
  font-weight: 400;
  span{
    padding-left:5px;
  }
}
.status{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: red;
  margin-right: 5px;
}
.content_last{
  width:100%;
  padding: 10px 0;
  border:1px solid rgb(187, 187, 187);
  border-left:0;
  span{
    padding-left:15px;
  }
}
.no_left_border{
  border-left:0;
}
</style>