haoxuan
2024-04-09 4bf10a1ba42ddaeab565c105b376c5732b0f3dab
src/views/systemSetting/workshopManage/components/addWorkshop.vue
@@ -1,62 +1,364 @@
<template>
  <div class="add_wordshop">
    <el-dialog
      title="提示"
      :visible.sync="editConfig.visible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editConfig.visible = false">取 消</el-button>
        <el-button type="primary" @click="editConfig.visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="editDialogVisible"
    width="33rem"
    class="add-event-dialog"
    @close="shutdown"
    append-to-body
  >
    <div slot="title" class="tac drawerHeader">添加车间</div>
    <div class="drawerContent">
      <el-table
        v-if="isTableShow"
        :header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
        ref="multipleTable"
        :data="BomTableData"
        tooltip-effect="dark"
        height="440"
      >
        <el-table-column prop="unit">
          <template slot="header" slot-scope="scope">
            <span style="color: #f56c6c">*</span>
            <span>{{ scope.row }}</span>
            名称
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="设为默认">
          <template slot-scope="scope">
            <el-switch
              @change="switchChange(scope, scope.row.isDefault)"
              v-model="scope.row.isDefault"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <i
              class="el-icon-delete"
              id="iconStyle"
              @click="handleDelete(scope.row.id)"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <el-button
        @click="handleAdd()"
        type="text"
        class="margin_top_15px margin_left_20px"
        >新增下拉框</el-button
      >
    </div>
    <div slot="footer" class="dialog-footer tac">
      <!-- <el-button
        @click="handleAdd()"
        style="margin-left: 16px; color: #fff; background-color: #ee790c"
        >新增</el-button
      > -->
      <el-button @click="shutdown">取消</el-button
      ><el-button
        type="primary"
        @click="handleConfirmSave()"
        style="margin-left: 16px; color: #fff; background-color: #2a78fb"
        >确定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
// import { addMaterial, updateMaterial } from "@/api/ProductiveTask/inventory";
// import { getCodeStandardList } from "@/api/basic/standard";
// import { postSaveBomKindDict } from "@/api/ProductiveTask/productBom";
export default {
  name: "addWorkshop",
  props: {
    editDiaConfig:{
    title: {
      type: String,
    },
    editRow: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomitton: {
          }
        }
      }
    }
        return {};
      },
    },
    workList: {
      type: Array,
    },
  },
  data() {
    return {
      editConfig:this.editDiaConfig
      editDialogVisible: false,
      isTableShow: true,
      form: {},
      BomTableData: [1],
      work: 1,
      flag: "add",
      obj: { name: "", page: 0, pageSize: 0, type: "物料编码" },
      inputValue: [],
      codenumer: 0, //每次输入的编码
      codenumberList: [], //整条编码
      sum: 0,
      explain: "",
      Tabs: "msg",
      tableData: [
        {
          date: "PEBU",
          name: "PE布",
          number: "21",
          unit: "吨",
        },
      ],
      rules: {
        id: [{ required: true, message: "请输入物料编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入物料名称", trigger: "blur" }],
        specs: [{ required: true, message: "请输入物料规格", trigger: "blur" }],
        type: [{ required: true, message: "请输入物料型号", trigger: "blur" }],
        amount: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        unit: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
        ],
        model: [
          { required: true, message: "请选择物料类型", trigger: "change" },
        ],
      },
    };
  },
  computed: {
  },
  created() {
  },
  mounted() {
  },
  watch: {
    editDialogVisible(newVal) {
      if (newVal) {
        this.BomTableData = this.workList;
      }
    },
    workList(newVal) {
      console.log(newVal)
      this.BomTableData = this.workList;
    },
  },
  mounted() {},
  methods: {
    handleClose(done) {
      done();
    }
  },
  components: {
    handleAdd() {
      this.BomTableData.push({ name: "", isDefault: false });
    },
    handleDelete(id) {
      this.BomTableData = this.BomTableData.filter((i) => {
        return i.id != id;
      });
    },
    // async getCodeStandardList() {
    //   const res = await getCodeStandardList(this.obj);
    //   this.codenumer = [];
    //   this.sum = 0;
    //   this.explain = "";
    //   const { rules = [] } = res.data[0];
    //   rules.forEach((item, index) => {
    //     this.codenumer.push(item.length);
    //     this.sum++;
    //     // index - 1
    //     //   ? (this.explain += item.name + "/")
    //     //   : (this.explain += item.name);
    //     this.explain += item.name + (index === rules.length - 1 ? "" : "/");
    //   });
    //   this.$forceUpdate();
    // },
    codeList(val) {
      console.log(val, "codeList");
      this.inputValue = val;
      this.codenumberList = val.toString();
      console.log(this.codenumberList.replace(/,/g, ""));
    },
    switchChange(scope, val) {
      let arr = [];
      for (let i in this.BomTableData) {
        if (this.BomTableData[i].isDefault) {
          arr.push(i);
        }
      }
      if (arr.length > 1) {
        this.$message({
          message: "只能设一个为默认",
          type: "warning",
        });
        scope.row.isDefault = !val;
      }
    },
    handleConfirmSave() {
      let arr = [];
      for (let i in this.BomTableData) {
        if (this.BomTableData[i].isDefault) {
          arr.push(i);
        }
      }
      if (arr.length > 1) {
        this.$message({
          message: "只能设一个为默认",
          type: "warning",
        });
      } else {
        this.$emit("handleConfirmSave", this.BomTableData);
      }
    },
    // async validate() {
    //   try {
    //     if (this.flag == "add")
    //       this.form.id = this.codenumberList.replace(/,/g, "");
    //     this.form.explain = this.explain;
    //     let fn = this.flag == "set" ? updateMaterial : addMaterial;
    //     const res = await fn(this.form);
    //     this.shutdown();
    //     this.$sucessSet("sucessSet");
    //     if (res.code == 200) {
    //       this.$message({
    //         message: this.flag == "set" ? "修改成功!" : "添加成功!",
    //         type: "success",
    //       });
    //     }
    //   } catch (err) {
    //     console.log(err);
    //     this.$message({
    //       message: err.message.data.data,
    //       type: "warning",
    //     });
    //   }
    // },
    shutdown() {
      this.editDialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.drawer {
  z-index: 99;
  border: 2px solid #ccc;
  border-radius: 20px;
  background: #fff;
  width: 25vw !important;
  height: 600px;
  #iconStyle {
    font-size: 20px !important;
  }
  .drawerContent {
    position: relative;
    overflow-y: auto;
    padding: 12px 10px 0 10px;
    padding-top: 12px;
    margin: auto;
    width: 25vw;
    overflow-x: hidden;
    height: 480px;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    ::v-deep .el-tabs__nav-scroll {
      padding-left: 25px;
    }
    .baseTitle {
      margin: 50px 0 20px;
      font-weight: bold;
    }
    .baseInfo {
      display: flex;
    }
  }
  .drawerContent::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.drawerFooter {
  margin-top: 16px;
  margin-right: 20px;
  text-align: right;
  .el-button {
    width: 80px;
    height: 38px;
    border-color: rgba(0, 0, 0, 0.1);
    font-family: PingFangSC-Medium, sans-serif;
    color: #000;
  }
}
::v-deep .el-form {
  width: 389px;
  .input-box .input-content input {
    margin: 0;
    margin-right: 3px;
  }
  .el-input__inner,
  .el-textarea__inner {
    line-height: 18px;
    font-family: PingFangSC;
  }
}
::v-deep .el-tabs__header {
  border: none;
  .el-tabs__nav {
    border: none;
  }
}
::v-deep .el-form-item__content {
  width: 263px;
  .input-box {
    width: 263px;
  }
}
::v-deep .el-form-item__label {
  font-size: 13px !important;
  color: #000;
  font-family: PingFangSC;
  text-align: center !important;
  width: 60px;
}
::v-deep .input-box .input-content input {
  width: 23px;
  height: 26px;
  border-color: rgba(0, 0, 0, 0.1);
  font-family: PingFangSC;
}
::v-deep .el-icon-minus {
  width: 13px !important;
  height: 26px !important;
  line-height: 38px !important;
  color: #e5e5e5;
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px !important;
  color: rgba(0, 0, 0, 0.9);
}
::v-deep .el-input__inner::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
::v-deep .el-form-item__error {
  font-family: PingFangSC;
}
.self {
  ::v-deep .el-input__inner {
  }
}
::v-deep .el-select-dropdown {
  position: absolute !important;
  top: 36px !important;
  left: 0px !important;
}
::v-deep .el-select-dropdown__wrap {
  overflow: auto !important;
}
::v-deep .el-dialog__body{
  padding-bottom:10px!important;
}
</style>