BJYSYBZ/BJYSYBZ_C/src/views/YgxqView/components/ZzTd.vue

<template>
  <div>
    <table class="border">
      <tr>
        <td class="th">地块名称</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.dkmc" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">权利人名称</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.tdqlr" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">投资项目名称</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.tzxmmc" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">面积(亩)</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.txmj" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">批准文号</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.pzwh" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">电子监管号</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.dzjgh" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">受让人地址</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.ssrdz" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">坐落</td>
        <td>
          <el-input size="medium" v-model="sumbitObj.tdzl" placeholder="请输入"></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">签订日期</td>
        <td>
          <el-date-picker
            style="width: 100%"
            v-model="sumbitObj.qdrq"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td class="th">批准日期</td>
        <td>
          <el-date-picker
            style="width: 100%"
            v-model="sumbitObj.pzrq"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </td>
      </tr>
    </table>
    <div class="btn-wrapper">
      <div class="btn-item btn-item-1" @click="sumbit"> <img src="@/assets/images/bjybz/save.png" alt="">保 存</div>
      <div class="btn-item btn-item-2" @click="remove"> <img src="@/assets/images/bjybz/delete.png" alt="">删 除</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZzTd",
  components: {},
  props: {
    obj: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  watch: {
    obj: {
      deep: true,
      handler(nVal, oVal) {
        this.sumbitObj = { ...nVal, txmj: nVal.txmj && (nVal.txmj * 0.0015).toFixed(2) }
      }
    }
  },
  data() {
    return {
      sumbitObj: {}
    }
  },
  mounted() {
  },
  methods:{
    dateFormat(date) {
      if (date === null || date === undefined || date === "") {
        console.log("时间格式化有误，时间为null");
        return "";
      }
      var time1 = new Date(date);
      var time = new Date(time1.getTime() + 8 * 3600);  //el时间组件默认少8个时区
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      return y + "-" + this.add0(m) + "-" + this.add0(d);
    },
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    sumbit() {
      let urlApi = `/api/ybz-bj/zzydSave`;
      let params = {
        id: this.sumbitObj.id,
        dkmc: this.sumbitObj.dkmc,
        tdqlr: this.sumbitObj.tdqlr,
        tzxmmc: this.sumbitObj.tzxmmc,
        pzwh: this.sumbitObj.pzwh,
        dzjgh: this.sumbitObj.dzjgh,
        ssrdz: this.sumbitObj.ssrdz,
        tdzl: this.sumbitObj.tdzl,
        qdrq: this.sumbitObj.qdrq ? this.dateFormat(this.sumbitObj.qdrq) : null,
        pzrq: this.sumbitObj.pzrq ? this.dateFormat(this.sumbitObj.pzrq) : null,
        txmj: this.sumbitObj.txmj
      };
      this.$ajax.get(urlApi, params, this, false).then(resp => {
        let { data, success } = resp
        success && this.$message.success("保存成功")
        success || this.$message.error("操作繁忙")
      });
    },
    remove() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let urlApi = `/api/ybz-bj/gdBjRemove`;
        let params = {
          id: this.sumbitObj.id,
        };
        this.$ajax.get(urlApi, params, this, false).then(resp => {
          let { data, success } = resp
          success && this.$message.success("删除成功") && this.$vm.$emit("refreshLayer", 'bj-zzyd-new') && this.$parent.detailClose();
          success || this.$message.error("操作繁忙")
        });
      }).catch(() => {
      });
    }
  }

}
</script>

<style scoped lang="scss">
table {
  width: 100%;
  margin: 5px 0;
  position: relative;
  &.border {
    border-right: 1px solid #2B6DA7;
    border-bottom: 1px solid #2B6DA7;
    tr {
      .th {
        text-align: center;
        color: #A5DAFF;
        background: #0E4380;
        width: 146px;
        padding-left: 0px;
      }
      td {
        color: #fff;
        border-left: 1px solid #2B6DA7;
        border-top: 1px solid #2B6DA7;
        padding-left: 10px;
        ::v-deep .el-input {
          input {
            border: none;
          }
        }  
      }
    }
  }
  tr {
    height: 40px;
    th {
      font-size: 16px;
      color: rgba(135, 193, 255, 1);
    }
    td {
      ::v-deep .el-input {
        input {
          color: rgba(135, 193, 255, 1);
          background: transparent;
          border: 1px solid #4F91D7;
          &::-webkit-input-placeholder { 
            /* WebKit browsers，webkit内核浏览器 */
            color: rgba(135, 193, 255, 0.8);
          } 
          &:-moz-placeholder { 
            /* Mozilla Firefox 4 to 18 */ 
            color: rgba(135, 193, 255, 0.8);
          } 
          &::-moz-placeholder { 
            /* Mozilla Firefox 19+ */ 
            color: rgba(135, 193, 255, 0.8);
          } 
          &:-ms-input-placeholder { 
            /* Internet Explorer 10+ */ 
            color: rgba(135, 193, 255, 0.8);
          }
        }
      }
      ::v-deep .el-radio-group {
        label {
          color: rgba(135, 193, 255, 1);
        }
      }
    }
  }
}
.btn-wrapper {
  text-align: center;
  .btn-item {
    display: inline-block;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: bolder;
    cursor: pointer;
    &.btn-item-1 {
      border: 1px solid #268FC5;
      color: #5AE3FC;
      margin-right: 5px;
      &:hover {
        background: #1679ad30;
        color: #46E0FF;
      }
    }
    &.btn-item-2 {
      border: 1px solid #FF9797;
      color: #FF9797;
      &:hover {
        background: #FF979730;
        color: #ff7272;
      }
    }
    img {
      vertical-align: text-bottom;
      margin-right: 5px;
    }
  }
  .submit-btn {
    color: #133887;
    background: #56C1FF;
    &:hover {
      color: #FFF;
    }
  }
}
</style>