zhaoshangyinzi/ruoyi-ui/src/views/management/roduction/index.vue

<template>
  <div class="app-conta">
    <el-row :gutter="10" class="mb8 roiyy">
      <el-col :span="1.5" v-if="setrd % 2 == 1">
        <el-button
          type="primary"
          @click="submitBtn"
          v-hasPermi="['bmProject:project:examine']"
          >提交</el-button
        >
        <el-button
          type="primary"
          @click="submitForm"
          v-hasPermi="['system:config:edit']"
          >暂存</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="cancel"
          v-hasPermi="['system:config:edit']"
          >取消</el-button
        >
      </el-col>
      <el-col :span="1.5" :offset="18" v-if="setrd % 2 == 0">
        <el-button
          type="danger"
          @click="applyBtn"
          v-hasPermi="['bmProject:project:pass']"
          >审核</el-button
        >
        <el-button
          type="danger"
          @click="backBtn"
          v-hasPermi="['bmProject:project:reject']"
          >驳回</el-button
        >
      </el-col>
    </el-row>

    <div class="nauer">
      <!-- 投产项目 -->
      <div>
        <div class="nstruction">
          <!-- 内容 -->
          <div class="namjeu">
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              :inline="true"
              label-width="135px"
              label-position="center"
              class="manager_form"
            >
              <el-form-item label=" 已完成投资额:" prop="totInvestment">
                <el-input
                  v-model="form.totInvestment"
                  placeholder="请输入已完成投资额"
                  clearable
                  size="small"
                  style="width: 335px"
                />
              </el-form-item>
              <el-form-item label="设备投资额度:" prop="macInvestment">
                <el-input
                  v-model="form.macInvestment"
                  placeholder="请输入设备投资额度"
                  clearable
                  size="small"
                  style="width: 335px"
                />
              </el-form-item>
              <el-form-item label="投产时间:" prop="productDate">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.productDate"
                  style="width: 335px"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="投产图片:" class="maget_ty">
                <div class="forieu" style="width: 618px">
                  <div class="bure burert">
                    <el-upload
                      :action="defaultSettings.urls+'/prod-api/common/upload'"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-remove="handleRemove"
                      :on-success="handleOnsuccess"
                      :file-list="productPhotoList"
                    >
                      <i class="el-icon-plus"></i>
                      <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <el-button
                        style="margin-left: 10px"
                        size="small"
                        type="primary"
                        @click="submitUpload"
                        >上传到服务器</el-button
                      > -->
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="" />
                    </el-dialog>
                  </div>
                </div>
              </el-form-item>
              <el-form-item> </el-form-item>
              <el-form-item label=" 项目入规(限):" prop="isOk">
                <el-select
                  v-model="form.isOk"
                  placeholder="项目入规(限)"
                  clearable
                  size="small"
                  style="width: 335px"
                >
                  <el-option
                    v-for="dict in typeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="项目入规时间:" prop="okDate">
                <el-date-picker
                  type="date"
                  placeholder="选择项目入规时间"
                  v-model="form.okDate"
                  style="width: 335px"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import {
  listProduct,
  getProduct,
  delProduct,
  addProduct,
  updateProduct,
  exportProduct,
} from "@/api/production/production.js";
import { setExamine, setReject } from "@/api/projectInfo/info.js";
  const defaultSettings = require("@/settings.js");
export default {
  name: "production",
  data() {
    return {
      defaultSettings,
      //父级项目id
      bmProjectId: -1,
      scrop: { projectStatus: 2 },

      //图片
      disabled: false,
      dialogVisible: false,
      dialogImageUrl: false,

      productPhotoList: [],

      //数据字典
      typeOptions: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        totInvestment: [
          { required: true, message: "请输入已完成投资额", trigger: "blur" },
        ],
        macInvestment: [
          { required: true, message: "请输入设备投资额度", trigger: "blur" },
        ],
        productDate: [
          { required: true, message: "请选择投产时间", trigger: "blur" },
        ],
        isOk: [
          { required: true, message: "请选择项目入规(限)", trigger: "blur" },
        ],
        okDate: [
          { required: true, message: "请选择项目入规时间", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    var that = this;

    that.bmProjectId = that.$route.query.setid;
    that.form.bmProjectId = that.$route.query.setid;
    that.setrd = that.$route.query.setrd;
    that.getDicts("sys_yes_no").then((response) => {
      that.typeOptions = response.data;
    });
    getProduct(that.bmProjectId).then((response) => {
      if (response.data) {
        that.form = response.data;
        if (that.form.productPhoto.length > 0) {
          this.productPhotoList = JSON.parse(that.form.productPhoto);
        }
      }
    });
  },
  methods: {
    reset() {
      var that = this;
      that.form = {
        id: this.form.id,
        bmProjectId: this.form.bmProjectId,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isDel: null,
        totInvestment: null,
        macInvestment: null,
        productDate: null,
        productPhoto: null,
        isOk: null,
        okDate: null,
      };
      this.productPhotoList = [];
    },
    //上传图片
    handleSuccpermit(response, file, fileList) {
      console.log(file.response.url);
    },

    //提交
    submitBtn() {
      var that = this;
      this.$confirm("是否确认提交", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return setExamine({
            code: 1,
            bmProjectId: that.bmProjectId,
          });
        })
        .then(() => {
          this.$router.go(-1);
          this.getList();
          this.msgSuccess("审核成功");
        });
    },

    /** 暂存按钮 */
    submitForm() {
      var tmp = [];
      if (this.productPhotoList.length == 0) {
        this.msgError("请先选择投产图片");
        return;
      }
      this.productPhotoList.forEach((item, index) => {
        var obj = {};
        obj.name = item.response.fileName;
        obj.uid = item.uid;
        obj.url = item.response.url;
        tmp[index] = obj;
      });
      this.form.productPhoto = JSON.stringify(tmp);

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateProduct(this.form).then((response) => {
              this.msgSuccess("暂存成功");
            });
          } else {
            addProduct(this.form).then((response) => {
              this.msgSuccess("暂存成功");
            });
          }
        }
      });
    },

    submitUpload() {
      this.$refs.upload.submit();
    },

    handleOnsuccess(response, file, fileList) {
      this.productPhotoList = fileList;
    },
    handleRemove(file, fileList) {
      this.productPhotoList = fileList;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },

    /** 查询参数列表 */
    getList() {
      this.loading = true;
      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.configList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // // 参数系统内置字典翻译
    // typeFormat(row, column) {
    //   return this.selectDictLabel(this.typeOptions, row.configType);
    // },

    //审核
    applyBtn() {
      var that = this;
      this.$confirm("是否确认审核", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return setExamine({
            code: 3,
            bmProjectId: that.bmProjectId,
          });
        })
        .then(() => {
          this.$router.go(-1);
          this.getList();
          this.msgSuccess("审核成功");
        });
    },
    //驳回
    backBtn() {
      var that = this;
      this.$confirm("是否确认驳回", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return setReject({
            code: 2,
            bmProjectId: that.bmProjectId,
          });
        })
        .then(() => {
          this.$router.go(-1);
          this.getList();
          this.msgSuccess("驳回成功");
        });
    },

    // 取消按钮
    cancel() {
      this.$router.go(-1);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加参数";
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.configId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 修改按钮操作 */
    handleUpdate() {},
    //tab
    tabClid(index) {
      this.tab = index;
      // this.$router.push('/tab');
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.buiy {
  // width: 75px !important;
  // height: 30px !important;
  // line-height: 30px !important;
}
.ijeut {
  display: flex;
  height: 78px;
  align-items: center;
}

.burert {
  .el-upload--picture-card {
    height: 78px;
    line-height: 78px;
    width: 80px;
    vertical-align: center;
    border: 0 !important;
    background-color: #fff;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    height: 78px !important;
    width: 78px !important;
  }
}

.manager_form {
  .manager_lab {
    .el-form-item__label {
      width: 145px !important;
    }
  }
  .maneg_lar {
    position: relative;
    .el-form-item__label {
      width: 134px !important;
    }
    span {
      position: absolute;
      left: -95%;
    }
  }
  .manager_labtwo {
    .el-form-item__label {
      width: 244px !important;
    }
  }
  .manager_labthre {
    // .el-form-item{
    .el-form-item__label {
      width: 130px !important;
    }
    margin-right: 40px !important;
    // }
  }
  .ieuyr {
    .el-textarea__inner {
      height: 80px !important;
    }
  }
  .mage_ter {
    .el-form-item__label {
      width: 513px !important;
    }
  }
  .maget_ty {
    .el-form-item__label {
      width: 135px !important;
    }
  }
  .forieu {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 480px;
    height: 100px !important;
    position: relative;

    .bure {
      display: flex;
      // position: absolute;
      // height: 100%;
      // right: 20px;
      // top: 50%;
      // transform: translateY(-50%);
      padding: 10px 0;
    }
    .burert {
      display: flex;
      position: absolute;
      height: 100%;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.lage_div {
  padding-left: 15px;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
.app-conta {
  .header {
    padding-left: 22px;
    height: 45px;
    line-height: 40px;
    background-color: #f1f1f1;
    font-size: 18px;
    color: #343434;
    margin-bottom: 40px;
  }
  .nauer {
    .nuae_wtu {
      display: flex;
      justify-content: center;
      align-content: center;
      .naue_one {
        width: 30%;
        p {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
        }
        .naue_name {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0669b2;
          margin-bottom: 30px;
        }
      }
      .naue_two {
        flex: 1;
        padding-top: 20px;
        // display: flex;
        // align-items: center;
        // justify-content: center;
      }
    }
    //tab
    .naue_tab {
      border-bottom: 1px solid #cdcdcd;
      display: flex;
      margin-top: 30px;
      padding: 0 10px;
      margin-bottom: 30px;
      p {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
        padding: 11px 15px;
        margin: 0;
      }
      .p {
        border-bottom: 2px solid #1c84c6;
        margin-bottom: -1px;
      }
    }
    .mation {
      .enterprise {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #1c84c6;
        margin-top: 25px;
        margin-bottom: 20px;
      }
      .enterprise_tw {
        i {
          margin-right: 5px;
        }
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #666666;
      }
    }
  }
  .nvestor {
    margin-bottom: 10px;
    p {
      margin: 0;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      height: 24px;
      line-height: 24px;
      border-left: 3px solid #1c84c6;
      padding-left: 13px;
      i {
        color: red;
      }
    }
  }
  .souu {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #343434;
    margin-left: 5px;
  }
}
//在建项目
.nstruction {
  display: flex;
  align-items: center;
  .nstruction_nav {
    display: flex;
    align-items: center;
    p:nth-child(1) {
      margin-right: 10px;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
      span:nth-child(1) {
        color: #df0024;
      }
    }
    p:nth-child(2) {
      width: 233px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #cdcdcd;
      border-radius: 3px;
      padding-left: 14px;
    }
  }
  .nstruction_navne {
    margin-left: 50px;
    display: flex;
    align-items: center;
    p:nth-child(1) {
      margin-right: 10px;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }
      span:nth-child(1) {
        color: #df0024;
      }
    }
    p:nth-child(2) {
      width: 233px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #cdcdcd;
      border-radius: 3px;
      padding-left: 14px;
    }
  }
}
.kaieu {
  padding-left: 60px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #343434;
}
.kaieu_tw {
  padding-left: 60px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
</style>