real3d-portalsite/src/views/ConstructionApplication3D/Demolition/CQSetInfo.vue

<template>
  <!-- @blur="selectBlur($event, index)"  -->
  <div class="ZTGlobal" style="padding: 1rem; width: 100%">
    <el-row :gutter="10">
      <el-col :span="6">征地补偿标准：</el-col>
      <el-col :span="18">
        <el-select
          v-model="bcbz"
          style="width: 90%"
          @change="selectZDBZ"
          placeholder="请选择"
        >
          <el-option
            v-for="item in bcbzList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <!-- :span-method="arraySpanMethod" -->
    <el-table :data="curBCBZ.bcbz" fit border style="width: 100%">
      <!-- <el-table-column prop="id" label="ID" width="180">
            </el-table-column> -->
      <el-table-column prop="jg" label="房屋结构" width="80">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.jg"
            v-show="scope.row.seen"
            @focus="handleSetFoucsSetData(scope.row)"
            @blur="loseFoucs(scope.row)"
          ></el-input>
          <div v-show="!scope.row.seen">{{ scope.row.jg }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="等级" width="60">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.grade"
            v-show="scope.row.seen"
            @focus="handleSetFoucsSetData(scope.row)"
            @blur="loseFoucs(scope.row)"
          ></el-input>
          <div v-show="!scope.row.seen">{{ scope.row.grade }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="bz" label="单价(元/平方米)" width="80">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.bz"
            v-show="scope.row.seen"
            @focus="handleSetFoucsSetData(scope.row)"
            @blur="loseFoucs(scope.row)"
          ></el-input>
          <div v-show="!scope.row.seen">{{ scope.row.bz }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="des" label="结构及装饰特征(规格)">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.des"
            v-show="scope.row.seen"
            @focus="handleSetFoucsSetData(scope.row)"
            @blur="loseFoucs(scope.row)"
          ></el-input>
          <div v-show="!scope.row.seen">{{ scope.row.des }}</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleDeleteClick(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="center" type="flex">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button type="primary" @click="saveAs('ruleForm')">另存为</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
      <el-button type="primary" @click="delBZ()">删除</el-button>
    </el-row>
    <el-dialog
      title="标准名称设置"
      :modal="false"
      :visible.sync="dialogFormVisible"
      append-to-body="true"
      width="20rem"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="编辑"
      :modal="false"
      :visible.sync="editFormVisible"
      append-to-body="true"
      width="20rem"
    >
      <el-form :model="oldRow" :rules="rowRules" ref="rowForm">
        <el-form-item label="房屋结构" prop="jg">
          <el-select v-model="oldRow.jg">
            <el-option label="框架结构" value="框架结构"></el-option>
            <el-option label="混合结构" value="混合结构"></el-option>
            <el-option label="砖木结构" value="砖木结构"></el-option>
            <el-option label="简易结构" value="简易结构"></el-option>
            <el-option label="凉棚" value="凉棚"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房屋等级" prop="grade">
          <el-input
            v-model.number="oldRow.grade"
            type="number"
            min="1"
            max="5"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价(元/平方米)" prop="bz">
          <el-input
            v-model.number="oldRow.bz"
            type="number"
            min="0"
            max="10000000000"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="des">
          <el-input
            type="textarea"
            :rows="4"
            v-model="oldRow.des"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm('rowForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCqBcbzList,
  getCqBcbzItemList,
  getCqBcbzById,
  addCqBcbz,
  updateCqBcbz,
  updateCqBcbzItem,
  delCqBcbzItem,
  delCqBcbz,
} from "@/api/zt/ztApi.js";
export default {
  props: {
    cqValue: { type: Object },
    lyoption: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  name: "ZDShowInfo",
  data() {
    var bzValidate = (rule, value, callback) => {
      if (value == "" || value == null) callback(new Error("不能为空"));
      else if (value < 0) {
        callback(new Error("不能小于0"));
      } else callback();
    };
    return {
      editFormVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        name: null,
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },

          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      rulesEdit: {
        grade: [{ validate: bzValidate, trigger: "blur" }],
        bz: [{ validate: bzValidate, trigger: "blur" }],
      },

      // rowForm: {
      //     JG: "框架结构",
      //     GRADE: 1,
      //     BZ: 1350,
      //     DES: ''
      // },

      rowRules: {
        grade: [
          // { required: true, message: "不能为空", trigger: "blur" },
          {
            type: "number",
            min: 1,
            max: 5,
            message: "范围1-5之间",
            trigger: "blur",
          },
        ],
        bz: [
          // { required: true, message: "不能为空", trigger: "blur" },
          //　/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
          {
            type: "number",
            min: 0,
            max: 10000000000,
            message: "不能小于0",
            trigger: "blur",
          },
        ],
      },
      /**
       * 补偿标准绑定值
       */
      bcbz: "",
      // curLabel: '',
      /**
       * 补偿标准列表
       */
      bcbzList: [],
      /**
       * 当前标准
       */
      curBCBZ: {
        name: "",
        id: "",
        bcbz: [
          // {
          //     JG: "框架结构",
          //     GRADE: "1",
          //     BZ: 1350,
          //     DES: "层高:3.5m，惨板:钢筋砼8cm厚，楼地面:铺地板砖，基础:钢筋砼基础，梁柱:钢筋砼梁柱，墙体:红砖内外墙，水电:普通水电及卫生设备，墙面:内墙一般涂料，外墙有装饰面，窗:铝合金玻璃窗，门:普通镶板门",
          // },
          // {
          //     JG: "框架结构",
          //     GRADE: "2",
          //     BZ: 1250,
          //     DES: "层高:3m，楼板:钢筋砼8cm厚，地面:水泥砂浆批面，梁柱:钢筋砼梁柱，基础:钢筋砼基础，墙体:红砖内外墙，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
          // },
          // {
          //     JG: "混合结构",
          //     GRADE: "1",
          //     BZ: 1100,
          //     DES: "层高:3.5m，楼板:钢筋砼8cm厚，楼地面:铺地板砖，墙体:红砖内外墙，基础:地梁，片石基础，墙面:内墙一般涂料、外墙有装饰贴面，水电:普通水电及卫生洁具，窗:铝合金玻璃窗门:普通木门",
          // },
          // {
          //     JG: "混合结构",
          //     GRADE: "2",
          //     BZ: 1050,
          //     DES: "层高:3m，楼板:钢筋砼8cm厚，楼地面:水泥砂浆批面，墙体:红砖内外墙，基础:地梁片石基础，墙面:一般涂料，门窗:木门窗，水电:普通水电及卫生洁具",
          // },
          // {
          //     JG: "砖木结构",
          //     GRADE: "1",
          //     BZ: 850,
          //     DES: "檐高:2.8m以上，墙体:红砖内外墙，地面:水泥砂浆批面、基础片石基础，屋面:土瓦屋面，梁料:木梁木，门窗:本门窗，墙面:石灰刷白，其他:普通水电设备",
          // },
          // {
          //     JG: "砖木结构",
          //     GRADE: "2",
          //     BZ: 750,
          //     DES: "檐高2.2m-2.8m，墙体:红砖内外墙，地面:水泥砂浆批面，墙面:石灰刷白，基础:片石基础，屋面:土瓦屋面，梁桁:木料木桁，门窗:木门窗",
          // },
          // {
          //     JG: "简易结构",
          //     GRADE: "1",
          //     BZ: 350,
          //     DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:铁皮顶或石棉瓦顶",
          // },
          // {
          //     JG: "简易结构",
          //     GRADE: "2",
          //     BZ: 300,
          //     DES: "层高:2.2m-3m，墙体:红砖墙，屋顶:油毡顶",
          // },
          // {
          //     JG: "简易结构",
          //     GRADE: "3",
          //     BZ: 280,
          //     DES: "层高:2.2m-3m，墙体:空心砖，屋顶:铁皮顶或石棉瓦顶",
          // },
          // {
          //     JG: "简易结构",
          //     GRADE: "4",
          //     BZ: 200,
          //     DES: "层高:2.2m-3m，墙体:空心砖，屋顶:油毡顶",
          // },
          // {
          //     JG: "简易结构",
          //     GRADE: "5",
          //     BZ: 80,
          //     DES: "层高:2.2m-3m，墙体:木板、铁皮、竹编等材料墙，屋顶油毡顶",
          // },
          // {
          //     JG: "凉棚",
          //     GRADE: "1",
          //     BZ: 120,
          //     DES: "铁皮顶或石棉瓦顶、铁柱、铁架",
          // },
          // {
          //     JG: "凉棚",
          //     GRADE: "2",
          //     BZ: 70,
          //     DES: "铁皮顶或石棉瓦顶、木柱、木架",
          // },
          // {
          //     JG: "凉棚",
          //     GRADE: "3",
          //     BZ: 20,
          //     DES: "油毡顶、竹片顶、木板顶、木柱、木架",
          // },
          // {
          //     JG: "凉棚",
          //     GRADE: "4",
          //     BZ: 10,
          //     DES: "茅草、编叶、柳叶等",
          // }
        ],
      },

      /**
       * 行数据
       */
      oldRow: {},
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    /**
     * 初始化
     */
    initForm() {
      debugger;

      // if (this.cqValue && this.cqValue != "") {
      //   this.bcbz = this.cqValue;
      //   var item = this.bcbzList.find((t) => t.value == this.bcbz);
      //   this.curBCBZ = item;
      // }
      this.getInitData();
    },
    getInitData() {
      var that = this;
      that.bcbz = that.cqValue;
      if (window.isUseDB) {
        that.curBCBZ = {
          id: "",
          name: "",
          bcbz: [],
        };
        getCqBcbzList()
          .then((res) => {
            that.bcbzList = res.rows;
            if (that.bcbz == null || that.bcbz == "") {
              if (that.bcbzList.length > 0) {
                that.cqValue = that.bcbzList[0].id;
                that.bcbz = that.cqValue;
                that.curBCBZ.id = that.bcbz;
                that.curBCBZ.name = that.bcbzList[0].name;
              }
            } else {
              var item = that.bcbzList.find((t) => t.id == that.bcbz);
              if (item) {
                that.curBCBZ.id = item.id;
                that.curBCBZ.name = item.name;
              }
            }
            var queryParams = {
              bz: null,
              des: null,
              grade: null,
              id: null,
              jg: null,
              pid: that.bcbz,
            };
            getCqBcbzItemList(queryParams)
              .then((response) => {
                if (response) {
                  that.curBCBZ.bcbz = response.rows;
                }
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        that.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.CQBCList));
        if (that.cqValue != null && that.cqValue != "") {
          that.curBCBZ = that.bcbzList.find((t) => t.id == that.bcbz);
        } else {
          if (that.bcbzList.length > 0) {
            that.cqValue = that.bcbzList[0].id;
            that.bcbz = that.cqValue;
            that.curBCBZ = that.bcbzList[0];
          }
        }
      }
    },
    /**
     * 选择标准下拉框
     */
    selectZDBZ() {
      var that = this;
      if (that.bcbz && that.bcbz != "") {
        if (window.isUseDB) {
          that.curBCBZ = {
            id: "",
            name: "",
            bcbz: [],
          };
          var queryParams = {
            bz: null,
            des: null,
            grade: null,
            id: null,
            jg: null,
            pid: that.bcbz,
          };
          getCqBcbzItemList(queryParams)
            .then((response) => {
              if (response) {
                that.curBCBZ.bcbz = response.rows;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.CQBCList));
          if (this.cqValue != undefined && this.cqValue != "") {
            this.curBCBZ = this.bcbzList.find((t) => t.id == this.bcbz);
          }
        }
      } else {
        that.$message.warning("请选择标准");
      }
    },

    /**
     * 重置
     */
    reset() {
      // var val = this.bcbz
      this.bcbzList = JSON.parse(JSON.stringify(window.ZSBC.CQBCList));
      var item = this.bcbzList.find((t) => t.id == this.bcbz);
      debugger;
      this.curBCBZ = item;
    },

    /**
     * 保存修改
     */
    save() {
      var that = this;
      if (that.bcbz == "") {
        that.$layer.alert("请选择补偿标准");
        return;
      }
      if (window.isUseDB) {
        var item = {
          id: that.curBCBZ.id,
          name: that.curBCBZ.name,
          bcbz: that.curBCBZ.bcbz,
        };
        updateCqBcbz(item)
          .then((res) => {
            if (res) that.getInitData();
            that.$layer.alert("保存完成");
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        var index = window.ZSBC.CQBCList.findIndex((t) => t.value == this.bcbz);
        if (index > -1) {
          window.ZSBC.CQBCList[index] = this.curBCBZ;
          this.$layer.alert("保存完成");
        }
      }
    },
    /***
     * 另存为
     */
    saveAs(formName) {
      debugger;
      // if (this.bcbz == "") {
      //     this.$layer.alert("请选择补偿标准");
      //     return
      // }
      this.dialogFormVisible = true;
      this.$nextTick(function () {
        this.$refs[formName].resetFields();
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.dialogFormVisible = false;
          this.saveData();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 另存数据
     */
    saveData() {
      debugger;
      var date = new Date();
      var val = date.getTime().toString();
      var that = this;
      var newBCBZ = {
        id: val,
        name: that.ruleForm.name,
        bcbz: that.curBCBZ.bcbz,
      };
      if (window.isUseDB) {
        addCqBcbz(newBCBZ)
          .then((res) => {
            if (res) that.getInitData();
            that.lyoption.content.parent.initSetting();
            that.$layer.alert("保存完成");
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        window.ZSBC.CQBCList.push(newBCBZ);
        that.bcbzList = window.ZSBC.CQBCList;
        that.bcbz = val;
      }
    },
    updateZDWindow() {
      var that = this;
      that.$layer.close(window.zdWindowId);
      window.zdWindowId = this.$layer.iframe({
        layerStyle: {
          padding: "0.3vw 1vw 0.3vw 2.5vw",
          backgroundImage: "url(/static/images/popup/modal-title.png)",
          backgroundRepeat: "no-repeat",
        },
        content: {
          content: DemolitionList, //传递的组件对象
          parent: this, //当前的vue对象
          data: {}, //props
        },
        offset: [340, 460], //left top  左上角(left=430px/2;top=（800px+header高）/2)
        area: ["430px", "800px"],
        title: "征收补偿预估",
        maxmin: false,
        shade: false, //是否显示遮罩
        shadeClose: false, //点击遮罩是否关闭
        cancel: () => {
          viewer.entities.removeAll();
          //关闭事件
          // alert("关闭iframe");
        },
      });
    },
    /**
     * 编辑按钮
     */
    handleClick(row) {
      debugger;

      this.oldRow = JSON.parse(JSON.stringify(row));
      this.editFormVisible = true;
    },
    handleDeleteClick(row) {
      var that = this;
      if (row == undefined) return;
      var index = that.curBCBZ.bcbz.findIndex((t) => (t.id = row.id));
      var formId = that.$layer.confirm(
        "确定要删除吗？",
        {},
        function () {
          delCqBcbzItem([row.id])
            .then((res) => {
              if (res) {
                that.$message("数据已删除!");
                if (index > -1) that.curBCBZ.bcbz.splice(index, 1);
                that.$layer.close(formId);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
        function () {
          return;
        }
      );
    },
    /**
     * 开启行编辑
     * @param {object} row
     */
    handleSetFoucsSetData(row) {
      this.oldRow = row;
    },
    submitEditForm(formName) {
      // if (!this.chageBCBZ())
      //   return false;
      // else {
      console.log(this.oldRow.bz);
      console.log(this.oldRow.grade);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.editFormVisible = false;
          this.updateItem();
          // this.$layer.alert("保存完成");
          return true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      // }
    },
    /**
     *
     */
    updateItem() {
      var that = this;
      var model = {
        bz: that.oldRow.bz,
        des: that.oldRow.des,
        grade: that.oldRow.grade,
        id: that.oldRow.id,
        jg: that.oldRow.jg,
        pid: that.oldRow.pid,
      };
      updateCqBcbzItem(model)
        .then((res) => {
          if (res) {
            that.$layer.alert("保存完成");
            debugger;
            let bcbz = that.curBCBZ.bcbz.find((c) => c.id == model.id);
            bcbz.bz = model.bz;
            bcbz.des = model.des;
            bcbz.grade = model.grade;
            bcbz.jg = model.jg;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 保存当前行
     * @param {object} row
     */
    saveHandleClick(row) {
      row.seen = false;
    },
    chageBCBZ() {
      if (this.oldRow.grade < 1) {
        this.$message.warning("不能小于1");
        return false;
      }
      if (this.oldRow.bz < 0) {
        this.$message.warning("不能小于0");
        return false;
      }
      return true;
    },
    delBZ() {
      var that = this;

      var formId = that.$layer.confirm("确定要删除吗？", {}, function () {
        if (window.isUseDB) {
          delCqBcbz(that.bcbz)
            .then((res) => {
              if (res) {
                that.$layer.alert("数据已删除");
                that.cqValue = "";
                that.bcbz = that.cqValue;
                that.getInitData();
                that.lyoption.content.parent.initSetting();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          var index = window.ZSBC.CQBCList.findIndex((t) => t.id == that.bcbz);
          if (index > -1) {
            window.ZSBC.CQBCList.splice(index, 1);
          }
          that.cqValue = "";
          that.bcbz = that.cqValue;
          that.getInitData();
          that.lyoption.content.parent.initSetting();
        }
        that.$layer.close(formId);
      });
    },
  },
};
</script>
<style lang="scss">
@import "@/../../zt.scss";
</style>

<style scoped>
/* .subtitle {
    color: #02a7f0;
    font-weight: 400;
} */
.el-input >>> .el-input__inner {
  text-align: right !important;
}

/* .el -input>input, .el-select-dropdown, .el-textarea>textarea
{
    color: #fff !important;
    background-color: rgba(4, 28, 50, 0.5) !important;
    border: 1px solid rgba(15, 122, 200, 0.4) !important;
    text-align: center;

} */
.el-form-item {
  margin: 0;
}

.el-input__inner {
  text-align: end;
}
</style>