JG-CLIENT-TEMP/src/views/pro-steps/components/jiluxiang.vue

<template>
  <div class="stepsViewScrollH">
    <template v-if="submitStatus == true">
      <div class="operateBody">
        <el-scrollbar>
          <div class="operateBox" v-for="(item, index) in listData">
            <div class="inputBox">
              <div class="valueBox">
                <div class="describeText value">{{ index + 1 }}.记录项：</div>
                <div class="inputText">
                  <el-input
                    :disabled="
                      item.addStatus == false && item.updateStatus == false
                    "
                    v-model="item.label"
                    style="width: 240px"
                    placeholder="请输入"
                  />
                </div>
              </div>
              <div class="valueBox">
                <div class="describeText value">内容：</div>
                <div class="inputText">
                  <el-input
                    :disabled="
                      item.addStatus == false && item.updateStatus == false
                    "
                    v-model="item.inputValue"
                    type="textarea"
                    placeholder="请输入"
                    maxlength="1000"
                  />
                </div>
              </div>
            </div>
            <div class="operate">
              <div class="iconBox">
                <div
                  class="operateText"
                  v-if="
                    item.addStatus == false &&
                    index == listData.length - 1 &&
                    item.updateStatus == false
                  "
                  @click="addFnc"
                >
                  增加
                </div>
                <div
                  v-if="item.addStatus == false && item.updateStatus == false"
                  class="operateText"
                  @click="deleteFnc(item.id, index)"
                >
                  删除
                </div>
                <div
                  v-if="item.addStatus == false && item.updateStatus == false"
                  class="operateText"
                  @click="updateFnc(item)"
                >
                  编辑
                </div>
                <div
                  v-if="item.addStatus == true || item.updateStatus == true"
                  class="operateText"
                  @click="isOkFnc(item, index)"
                >
                  完成
                </div>
                <div
                  v-if="item.addStatus == true || item.updateStatus == true"
                  class="operateText"
                  @click="cancelFnc(index, item)"
                >
                  取消
                </div>
              </div>
            </div>
          </div>
          <div
            @click="addFnc"
            class="operateBox"
            v-if="listData.length < 1"
            style="
              height: 80px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <el-icon size="30">
              <Plus />
            </el-icon>
          </div>
          <div class="btns">
            <el-button @click="btn" type="primary" v-if="submitStatus" plain>{{
              submitStatus ? "返回 " : "编 辑"
            }}</el-button>
          </div>
        </el-scrollbar>
      </div>
    </template>

    <!-- 展示 -->
    <div class="recordBody" v-if="submitStatus == false">
      <div class="left" v-if="listData.length > 0">
        <el-scrollbar>
          <div style="display: flex; flex-wrap: wrap">
            <div
              @click="showSelectIndex = index"
              :class="index == showSelectIndex ? 'infoBox active' : 'infoBox'"
              v-for="(item, index) in listData"
              :key="item"
            >
              <div>
                <div class="titleText">记录项名：</div>
                <div class="describeText">{{ item.label }}</div>
              </div>
              <div>
                <div class="titleText">记录内容：</div>
                <div class="describeText textarea">
                  {{ item.inputValue }}
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="right" v-if="listData.length > 0">
        <el-scrollbar>
          <div class="titleText" style="text-align: center">
            {{ listData[showSelectIndex].label }}
          </div>
          <div class="describeText" style="padding: 0 20px">
            {{ listData[showSelectIndex].inputValue }}
          </div>
        </el-scrollbar>
      </div>
      <div
        style="
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        v-if="listData.length == 0"
      >
        <Empty />
      </div>
    </div>
    <div class="btns">
      <el-button @click="btn" type="primary" v-if="!submitStatus" plain>{{
        submitStatus ? "返回 " : "编 辑"
      }}</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  listAdd,
  getList,
  listDelete,
  listUpdate,
} from "@/api/prosteps/jiluxiang";
import { useProcessStore } from "@/store";
defineOptions({
  name: "Jiluxiang",
});
const showSelectIndex = ref(0);
const submitStatus = ref(false);
const store = useProcessStore();
const jianDisabled = ref(true);
const jiaDisabled = ref(false);
const listData = ref([]);
const submitData = ref([]);
const getListData = async () => {
  const { data } = await getList({
    pageNo: 1,
    pageSize: 9999,
    processId: Number(store.scanInfo.id),
    seqNo: store.scanInfo.seqNo,
    operationRecordItemId: Number(store.odersData.operationId),
  });
  listData.value = data.records;
  listData.value.forEach((item) => {
    item.addStatus = false;
    item.updateStatus = false;
  });
};
const item = {
  inputValue: "",
  label: "",
  updateInputValue: "",
  updateLabel: "",
  processId: Number(store.scanInfo.id),
  seqNo: store.scanInfo.seqNo,
  operationRecordItemId: Number(store.odersData.operationId),
  addStatus: true,
  updateStatus: false,
};
const btn = () => {
  if (submitStatus.value == true) {
    if (
      listData.value[listData.value.length - 1].addStatus == true ||
      listData.value[listData.value.length - 1].updateStatus == true
    ) {
      ElMessage.warning("请确认各项记录编辑完成！");
      return;
    } else {
      submitStatus.value = !submitStatus.value;
    }
  } else {
    submitStatus.value = !submitStatus.value;
  }
};
const addFnc = (index) => {
  listData.value.push({
    ...item,
    sort: listData.value == 0 ? 1 : listData.value.length,
  });
};
const deleteFnc = async (id, index) => {
  const { data, code } = await listDelete({
    id,
  });
  if (code == "200") {
    ElMessage.success("操作成功！");
    listData.value.splice(index, 1);
  }
};
const updateFnc = (item) => {
  item.updateStatus = true;
  item.updateInputValue = item.inputValue;
  item.updateLabel = item.label;
};
const isOkFnc = async (item, index) => {
  if (item.addStatus == true) {
    const { data, code } = await listAdd(item);
    if (code == "200") {
      ElMessage.success("操作成功！");
      item.addStatus = false;
      item.id = data.id;
    }
  } else {
    const { data, code } = await listUpdate({
      ...item,
      inputValue: item.inputValue,
      label: item.label,
      processId: Number(store.scanInfo.id),
      seqNo: store.scanInfo.seqNo,
      operationRecordItemId: Number(store.odersData.operationId),
    });
    if (code == "200") {
      ElMessage.success("更新成功！");
      item.updateInputValue = "";
      item.updateLabel = "";
      item.updateStatus = false;
    }
  }
};
const cancelFnc = (index, item) => {
  if (item.addStatus == true) {
    listData.value.splice(index, 1);
  } else {
    item.inputValue = item.updateInputValue;
    item.label = item.updateLabel;
    item.updateStatus = false;
  }
};

onMounted(() => {
  getListData();
});
</script>

<style lang="scss" scoped>
.describeText {
  color: black;
}

.stepsViewScrollH {
  position: relative;
}

.active {
  border: 1px solid #0000ff50;
}

.btns {
  width: 100%;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;

  .el-button {
    width: 120px;
    border-radius: 25px;
    font-size: $f20;
    height: 50px;
    margin: 0 40px;
  }
}

.operateBody {
  width: 100%;
  height: calc(100%);
}

.recordBody {
  width: 100%;
  height: calc(100% - 80px);
  display: flex;

  .left {
    width: 50%;
    height: calc(100%);
    display: flex;
    justify-content: space-between;

    .infoBox {
      display: inline-block;
      box-sizing: border-box;
      width: 230px;
      height: 180px;
      background-color: white;
      border-radius: 16px;
      padding: 20px;
      margin: 0 5px;
      margin-bottom: 5px;
      .textarea {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .right {
    width: 50%;
    background-color: white;
    border-radius: 16px;
    height: calc(100%);
  }
}

.operateBox {
  padding: $p20;
  background-color: white;
  border-radius: 16px;
  margin: $p20;
  position: relative;
  display: flex;

  .inputBox {
    flex: 1;
    height: auto;
    border: 1px solid #00000060;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 $p20;

    .valueBox {
      display: flex;
      margin: $p10 0;

      .inputText {
        flex: 1;
      }

      .value {
        text-align: right;
        width: 110px;
      }
    }
  }

  .operate {
    width: 60px;
    height: auto;
    @include flex;

    .iconBox {
      display: flex;
      flex-direction: column;

      .operateText {
        padding: 2px 5px;
        cursor: pointer;
        font-size: 20px;
      }

      .operateText:hover {
        background-color: var(--el-color-primary);
        color: white;
        border-radius: 16px;
        padding: 0 5px;
      }
    }
  }
}

.el-icon {
  width: 60px;
  font-weight: bold;
}
</style>