zhgdyun/src/views/projectFront/qualitySpringback/electronicPouringOrder.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <!-- <el-form-item label="基站编号" prop="stationNo">
                  <el-input v-model="searchForm.stationNo" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" plain @click="getListData">查询</el-button>
                  <el-button type="warning" plain @click="resetForm">刷新</el-button> -->
        <el-button type="primary" @click="addFn" size="medium">
          <!-- {{$t('message.personnelPosition.cardManage.new_base_station')}} -->
          新增电子浇筑令
        </el-button>
        <!-- </el-form-item> -->
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="tableData">
        <el-table-column
          type="index"
          width="50"
          align="center"
          :label="$t('message.personnelPosition.cardManage.table.index')"
        ></el-table-column>
        <el-table-column
          prop="concreteTab"
          :label="'混泥土标号'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buildName"
          :label="'楼栋'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="floorName"
          :label="'楼层'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="subpackage"
          :label="'分包单位'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="mixingPlant"
          :label="'搅拌站单位'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pourTime"
          :label="'浇筑日期'"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="planVolume"
          :label="'计划方量'"
          align="center"
        ></el-table-column>
        <el-table-column
          :label="$t('message.personnelPosition.cardManage.table.operation')"
          align="center"
          width="250"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <div @click="editFn(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t("message.personnelPosition.cardManage.table.edit")
                }}</span>
              </div>
              <div @click="deleteFn(scope.row)" class="operationText">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>{{
                  $t("message.personnelPosition.cardManage.table.delete")
                }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
    <el-dialog :modal-append-to-body="false" :title="dialogTitle" :visible.sync="editDialog" width="667px">
      <div class="dialog_content">
        <el-form
          class="dialogFormBox"
          size="medium"
          label-width="120px"
          :model="editForm"
          ref="editForm"
          :rules="editFormRules"
          @close="editTinfo"
        >
          <el-form-item :label="'混泥土标号'" prop="concreteTab">
            <el-input
              v-model="editForm.concreteTab"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item :label="'楼栋'" prop="buildId">
            <el-select
              v-model="editForm.buildId"
              :placeholder="$t('message.personnelPosition.please_select')"
              @change="changeBuild"
            >
              <el-option
                v-for="(item, index) in buildList"
                :key="index"
                :label="item.buildName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="'楼层'" prop="floorId">
            <el-select
              v-model="editForm.floorId"
              :placeholder="$t('message.personnelPosition.please_select')"
            >
              <el-option
                v-for="(item, index) in floorList"
                :key="index"
                :label="item.floorName"
                :value="item.floorId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="'设计强度'" prop="designStrength">
            <el-select
              v-model="editForm.designStrength"
              :placeholder="$t('message.personnelPosition.please_select')" multiple
            >
              <el-option
                v-for="(item, index) in optionList2"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="'分包单位'" prop="subpackage">
            <el-input
              v-model="editForm.subpackage"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item :label="'搅拌站单位'" prop="mixingPlant">
            <el-input
              v-model="editForm.mixingPlant"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item :label="'浇筑日期'" prop="pourTime">
            <el-date-picker
              v-model="editForm.pourTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="'计划方量'" prop="planVolume">
            <el-input
              v-model="editForm.planVolume"
              :placeholder="
                $t(
                  'message.personnelPosition.cardManage.dialog_edit.placeholder'
                )
              "
            ></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="editDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{
                $t("message.personnelPosition.cardManage.dialog_edit.cancel")
              }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveFn"
              size="medium"
            >
              {{
                $t("message.personnelPosition.cardManage.dialog_edit.determine")
              }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getElectronPourOrderListApi,
  addElectronPourOrderApi,
  deleteElectronPourOrderApi,
  editElectronPourOrderApi,
  getPositionBuildListApi,
} from "@/assets/js/api/quality.js";

export default {
  name: "registerAudit",
  data() {
    return {
      searchForm: {
        stationNo: "",
      },
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      authorizedDialog: false,
      detail: {},
      fileList: [],
      editForm: {
        projectSn: this.$store.state.projectSn,
        buildId: "",
        concreteTab: "",
        floorId: "",
        mixingPlant: "",
        planVolume: "",
        pourTime: "",
        subpackage: "",
        designStrength:[]
      },
      editDialog: false,
      editFormRules: {
        concreteTab: [
          {
            required: true,
            message: this.$t(
              "message.personnelPosition.cardManage.dialog_edit.required"
            ),
            trigger: "blur",
          },
        ],
        buildId: [
          {
            required: true,
            message: this.$t(
              "message.personnelPosition.cardManage.dialog_edit.required"
            ),
            trigger: "blur",
          },
        ],
        floorId: [
          {
            required: true,
            message: this.$t(
              "message.personnelPosition.cardManage.dialog_edit.required"
            ),
            trigger: "blur",
          },
        ],
      },
      dialogTitle: this.$t(
        "message.personnelPosition.cardManage.dialog_edit.addText"
      ), //新增基站
      isAdd: false,
      buildList: [],
      floorList: [],
      optionList2: [
        // {
				// 		name: 'C7.5',
				// 		value: 'C7.5'
				// 	},
				// 	{
				// 		name: 'C10',
				// 		value: 'C10'
				// 	},
					{
						name: 'C15',
						value: 'C15'
					},
					{
						name: 'C20',
						value: 'C20'
					},
					{
						name: 'C25',
						value: 'C25'
					},
					{
						name: 'C30',
						value: 'C30'
					},
					{
						name: 'C35',
						value: 'C35'
					},
					{
						name: 'C40',
						value: 'C40'
					},
					{
						name: 'C45',
						value: 'C45'
					},{
						name: 'C50',
						value: 'C50'
					},{
						name: 'C55',
						value: 'C55'
					},{
						name: 'C60',
						value: 'C60'
					},
				],
    };
  },
  created() {
    this.getListData();
    this.loadBuildData();

    
  },
  methods: {
    editTinfo() {
      this.dialogTitle = '新增' //关闭弹窗就默认设置为add，编辑会设置edit
      this.editForm = {} //关闭弹窗就清除数据避免影响了编辑被禁止修改的内容
      // console.log('查看', this.currentVideoTypeDetail, '和', this.configInfoParams);
    },
    changeBuild() {
      this.buildList.forEach((element) => {
        if (element.id == this.editForm.buildId) {
          this.floorList = element.floorList;
          console.log('this.floorList------',this.floorList);
          this.editForm.floorId = "";
          return;
        }
      });
    },
    loadBuildData() {
      getPositionBuildListApi({
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        this.buildList = res.result;
        // this.activeBuildIndex = 0;
        // this.canAddRoom = false;
        // if (this.buildList.length > 0) {
        //     this.floorList = this.buildList[0];
        //     this.canAddRoom = true;
        //     this.loadFloorData();
        // }
      });
    },
    addFn() {
      this.isAdd = true;
      // this.dialogTitle = this.$t(
      //   "message.personnelPosition.cardManage.dialog_edit.addText"
      // ); //新增基站
      this.dialogTitle = '新增'
      this.editDialog = true;
      this.$nextTick(() => {
        this.$refs["editForm"].resetFields();
        // this.editForm = {}
        this.editForm.buildId=''
        this.editForm.floorId=''
        this.editForm.concreteTab=''
        this.editForm.subpackage=''
        this.editForm.mixingPlant=''
        this.editForm.designStrength=''
        this.editForm.pourTime=''
        this.editForm.planVolume=''
      });
    },
    deleteFn(item) {
      this.$confirm(
        this.$t(
          "message.personnelPosition.cardManage.dialog_edit.confirmText"
        ) +
          "【" +
          item.concreteTab +
          "】?",
        this.$t("message.personnelPosition.cardManage.dialog_edit.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.cardManage.dialog_edit.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cardManage.dialog_edit.cancelButtonText"
          ),
          type: "warning",
        }
      ).then(() => {
        deleteElectronPourOrderApi({ id: item.id }).then((res) => {
          this.getListData();
          this.$message.success(
            this.$t(
              "message.personnelPosition.cardManage.dialog_edit.delete_success"
            )
          ); //删除成功!
        });
      });
    },
    editFn(item) {
      this.loadBuildData();
      this.editDialog = true;
      this.isAdd = false;
      // this.dialogTitle = this.$t(
      //   "message.personnelPosition.cardManage.dialog_edit.editText"
      // ); //编辑基站
      this.dialogTitle = '编辑'
      this.editForm = JSON.parse(JSON.stringify(item));
      // this.editForm.floorId=parseInt(this.editForm.floorId)
      this.buildList.forEach((element) => {
        if (element.id == this.editForm.buildId) {
          this.floorList = element.floorList;
          // this.editForm.floorId = "";
          return;
        }
      });
      if(item.designStrength){
        if(item.designStrength.indexOf(',')){
          this.editForm.designStrength=item.designStrength?item.designStrength.split(','):''
        }else{
          this.editForm.designStrength=[item.designStrength]
        }
      }
    },
    saveFn() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          var json = JSON.parse(JSON.stringify(this.editForm))
          console.log(this.editForm)
          json.designStrength=this.editForm.designStrength?this.editForm.designStrength.join(','):''
          if (this.isAdd) {
            addElectronPourOrderApi(json).then((res) => {
              this.editDialog = false;
              this.getListData();
              this.$message.success(
                this.$t(
                  "message.personnelPosition.cardManage.dialog_edit.add_success"
                )
              ); //添加成功！
            });
          } else {
            editElectronPourOrderApi(json).then((res) => {
              this.editDialog = false;
              this.getListData();
              this.$message.success(
                this.$t(
                  "message.personnelPosition.cardManage.dialog_edit.edit_success"
                )
              ); //编辑成功！
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取列表数据
    getListData() {
      let data = this.searchForm;
      data.pageNo = this.pageNo;
      data.pageSize = this.pageSize;
      data.projectSn = this.$store.state.projectSn;
      getElectronPourOrderListApi(data).then((res) => {
        // console.log(res);
        this.tableData = res.result.records;
        this.total = res.result.total;
      });
    },
    resetForm() {
      this.$refs["searchForm"].resetFields();
      this.getListData();
    },

    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
  },
};
</script>
<style lang="less" scoped>
.searchBox {
  justify-content: space-between;
}

.rightBox {
  margin-right: 20px;

  p {
    display: inline-flex;

    span {
      color: @--color-primary;
      font-size: 23px;
      font-weight: 500;
    }

    &:first-child {
      margin-right: 100px;
    }
  }
}
</style>