更新工艺接口联调，工艺详情的数据对接，工艺列表的更新状态和工艺详情的更新状态保持一致的逻辑

haoxuan

2023-11-06 e944a85425e1404f894e28be4735979d69466305

更新工艺接口联调，工艺详情的数据对接，工艺列表的更新状态和工艺详情的更新状态保持一致的逻辑

 src/auto-imports.d.ts

@@ -5,5 +5,5 @@
// Generated by unplugin-auto-import
export {}
declare global {

  const ElMessage: typeof import('element-plus/es')['ElMessage']
}

 src/components.d.ts

@@ -10,7 +10,6 @@
    AlertLightIcon: typeof import('./components/icons/AlertLightIcon.vue')['default']
    BaseModal: typeof import('./components/BaseModal.vue')['default']
    CommonModal: typeof import('./components/CommonModal.vue')['default']
    copy: typeof import('./components/BaseModal copy.vue')['default']
    DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']

 src/views/dashboard/components/CraftDetailModal.vue

@@ -2,18 +2,18 @@
  <div class="craft-detail-modal">
    <BaseModal v-model="modelData" :wider="true" @close="closeModal">
      <template #title>工艺详情 </template>
      <div class="modal-content">
      <div v-if="craftModel" class="modal-content">
        <el-scrollbar always class="scroller">
          <div :class="processObj.isUpdate ? 'modal-t margin_bottom_20' : 'modal-t  modal-t-two'">
          <div :class="!craftModel?.isUpdate ? 'modal-t margin_bottom_20' : 'modal-t  modal-t-two'">
            <div class="modal-t-l">
              <div class="modal-t-l-t">{{ processObj.procedure }}</div>
              <div class="modal-t-l-t">{{ craftModel?.procedure }}</div>
              <div class="modal-t-l-b">
                <span v-for="(item, index) in processObj.paramsMap" :key="index"> {{ index }} : {{ item }}； </span>
                <span v-for="(item, index) in craftModel?.paramsMap" :key="index"> {{ index }} : {{ item }}； </span>
              </div>
            </div>
            <div class="modal-t-r">工艺编号：{{ processObj.number }}</div>
            <div class="modal-t-r">工艺编号：{{ craftModel?.number }}</div>
          </div>
          <div v-if="processObj.isUpdate" class="modal-b">
          <div v-if="!craftModel?.isUpdate" class="modal-b">
            <div class="modal-b-t">更新设置</div>
            <template v-if="isUpdate == 1">
              <div class="modal-b-m">
@@ -23,25 +23,25 @@
                  </el-icon>
                </div>
                <div class="modal-b-m-r">
                  <span>已检查到新版本：{{ processObj.newNumber }}</span>
                  <span>已检查到新版本：{{ craftModel?.newNumber }}</span>
                  <BigButton class="btn" bg-color="#4343f5" @click="updateProcess">更新工艺</BigButton>
                </div>
              </div>
              <div class="modal-b-b">
                <div class="modal-b-b-l">
                  <div class="modal-b-b-l-t">{{ processObj.procedure }}</div>
                  <div class="modal-b-b-l-t">{{ craftModel?.procedure }}</div>
                  <div class="modal-b-b-l-b">
                    <span v-for="(item, index) in processObj.newParamsMap" :key="index">
                    <span v-for="(item, index) in craftModel?.newParamsMap" :key="index">
                      {{ index }} : {{ item }}；
                    </span>
                  </div>
                </div>
                <div class="modal-b-b-r">新版本：{{ processObj.newNumber }}</div>
                <div class="modal-b-b-r">新版本：{{ craftModel?.newNumber }}</div>
              </div>
            </template>
            <template v-else-if="isUpdate == 2">
              <div class="refresh-box">
                <template v-if="isLoading">
                <template v-if="loading">
                  <el-icon class="refresh-icon transform">
                    <Refresh />
                  </el-icon>
@@ -65,42 +65,54 @@
import { Refresh, Top } from '@element-plus/icons-vue'
import { useVModel } from '@vueuse/core'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { ref } from 'vue'
import { ref, toRefs, watch } from 'vue'
import type { CraftModel } from '@/api/craftModel'
export interface CraftDetailModalProps {
  craftModel?: CraftModel
  activeArr: Array
  modelValue: boolean
}
const props = withDefaults(defineProps<CraftDetailModalProps>(), {
  craftModel: undefined,
  modelValue: false
})

const { craftModel, activeArr, modelValue } = toRefs(props)
const emit = defineEmits<{
  'update:modelValue': [show: boolean]
  close: []
  renew: [craftModel: CraftModel, true]
}>()
const modelData = useVModel(props, 'modelValue', emit)

function closeModal() {
  emit('close')
}
const processObj = {
  isUpdate: 1, //1==无下面的更新设置  2==有更新设置
  procedure: '111',
  number: 111,
  paramsMap: {
    压强: 111
  },
  newNumber: '新222',
  newParamsMap: {
    压强: 222
  }
}
// 有更新设置的初始值
const isUpdate = ref(1)
const isLoading = ref(false)
const loading = ref(false)
watch(modelData, () => {
  // 弹窗显示时获取工艺参数
  if (modelData.value) {
    getLoading()
  }
})
function getLoading() {
  for (let i in activeArr.value) {
    if (activeArr.value[i] == craftModel.value.number) {
      isUpdate.value = 2
      loading.value = true
      return true
    }
  }
  isUpdate.value = 1
}

function updateProcess() {
  isUpdate.value = 2
  isLoading.value = true
  if (active.value) {
    return true
  }
  // 请求更新接口 获得数据之后isLoading.value=false;
  emit('renew', craftModel.value, true)
}
//TODO: 工艺详情弹窗
</script>
@@ -156,6 +168,9 @@
  overflow: auto;
  width: calc(100% - 60px);
  margin: 0 auto;
  :deep(.el-scrollbar__view) {
    height: 100%;
  }
  .modal-t-two {
    height: calc(100% - 55px) !important;
  }

 src/views/dashboard/components/ProcessInfo.vue

@@ -11,30 +11,57 @@
    <div v-if="craftModel.isUpdate" class="tip-r">
      <img src="~@/assets/images/process-tip.png" />
    </div>
    <div v-if="craftModel.isUpdate" class="tip-current">当前使用</div>
    <div v-if="craftModel.number == task?.Procedure?.processModelNumber" class="tip-current">当前使用</div>
    <div class="btn">
      <el-button type="primary" class="color_organge" @click="onUpdateClick"> 更新工艺 </el-button>
      <!-- :disabled="craftModel.isUpdate?false:true" -->
      <el-button type="primary" class="color_organge" @click="onUpdateClick">
        <el-icon v-if="loading" color="#fff" :size="16" class="refresh-top-icon">
          <Loading />
        </el-icon>
        更新工艺
      </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { toRefs } from 'vue'
import { toRefs, ref, watch } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import type { CraftModel } from '@/api/craftModel'
import type { Task } from '@/api/task'
const props = defineProps<{
  craftModel: CraftModel
  activeArr: Array
  task?: Task
}>()
const { craftModel } = toRefs(props)
const { craftModel, task, activeArr } = toRefs(props)

const emit = defineEmits<{
  update: [craftModel: CraftModel]
  detail: [craftModel: CraftModel]
}>()

const loading = ref(false)
watch(activeArr.value, () => {
  // 弹窗显示时获取工艺参数
  if (activeArr.value) {
    getLoading()
  }
})
function getLoading() {
  for (let i in activeArr.value) {
    if (activeArr.value[i] == craftModel.value.number) {
      loading.value = true
      break
    }
  }
}
function onDetailClick() {
  emit('detail', craftModel)
  emit('detail', craftModel.value)
}
function onUpdateClick() {
  emit('update', craftModel)
  if (loading.value) {
    return true
  }
  emit('update', craftModel.value)
}
</script>

@@ -42,12 +69,13 @@
$status-running: #f76c0f;
$status-done: #2c5dbb82;
$status-ready: #00ff00f0;
$status-disabled: #7b95d3;
.font_weight {
  font-weight: 600;
}
.process-info {
  width: calc(50% - 35px);
  height: 110px;
  height: 140px;
  padding: 23px 10px 10px;
  background: $status-done;
  border-radius: 8px;
@@ -69,6 +97,11 @@
    img {
      width: 100%;
    }
  }
  .refresh-top-icon {
    display: flex;
    align-items: center;
    color: #fff;
  }

  .item-r {
@@ -114,12 +147,18 @@
  .btn {
    width: 100px;
    position: absolute;
    right: 0px;
    right: 10px;
    bottom: 10px;
    .el-button--primary {
      background: $status-running;
      border: 0 !important;
    }
    .el-button.is-disabled,
    .el-button.is-disabled:focus,
    .el-button.is-disabled:hover {
      color: #fff !important;
      background: $status-disabled;
    }
  }
}
</style>

 src/views/dashboard/index.vue

@@ -20,7 +20,10 @@
              v-for="item in craftModelStore.craftModelList"
              :key="item.ID"
              :craft-model="item"
              :task="activeTask"
              :active-arr="activeArr"
              @detail="openCraftModelDetailModal"
              @update="updateCraft"
            ></ProcessInfo>
          </el-scrollbar>
        </el-tab-pane>
@@ -64,13 +67,20 @@
      <BigButton class="btn" bg-color="red">红灯呼叫</BigButton>
    </template>
  </DashboardLayout>
  <CraftDetailModal v-model="showCraftModelDetail" @close="showCraftModelDetail = false"></CraftDetailModal>
  <CraftDetailModal
    v-model="showCraftModelDetail"
    :active-arr="activeArr"
    :craft-model="currentCraftModelInfo"
    @renew="updateCraft"
    @close="showCraftModelDetail = false"
  ></CraftDetailModal>
  <MaterialDetails v-model="showMaterialDetail" :material="currentMaterialInfo"></MaterialDetails>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Worker, Order, Task, Material } from '@/api/task'
import type { CraftModel } from '@/api/craftModel'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
import ColorInfo from '@/views/dashboard/components/ColorInfo.vue'
@@ -94,6 +104,7 @@
import { useCraftModelStore } from '@/stores/craftModel'
import CraftDetailModal from '@/views/dashboard/components/CraftDetailModal.vue'
import MaterialDetails from '@/views/dashboard/components/MaterialDetails.vue'
import { updateCraftParams } from '@/api'

defineOptions({
  name: 'DashboardView'
@@ -157,9 +168,43 @@
craftModelStore.getCraftModelList()

const showCraftModelDetail = ref(false)
function openCraftModelDetailModal() {
// 当前要展示的工艺详情
const currentCraftModelInfo = ref<CraftModel>()
const activeArr = ref([])
function openCraftModelDetailModal(craftModel: CraftModel) {
  currentCraftModelInfo.value = craftModel
  showCraftModelDetail.value = true
}
// 更新工艺
function updateCraft(craftModel: CraftModel) {
  if (activeTask?.value?.Procedure?.ID) {
    activeArr.value.push(craftModel.number)
    updateCraftParams({ procedureId: activeTask!.value.Procedure.ID }).then(
      (res) => {
        if (res.code == 200) {
          editActive(craftModel)
          ElMessage({
            message: '更新成功！',
            type: 'success'
          })
        }
      },
      (err) => {
        console.error(err, '----err')
        setTimeout(() => {
          editActive(craftModel)
        }, 3000000)
      }
    )
  }
}
function editActive(craftModel: CraftModel) {
  for (let i in activeArr.value) {
    if (activeArr.value[i] == craftModel.number) {
      activeArr.value.splice(i, 1)
    }
  }
}

// 是否展示物料详情弹窗
const showMaterialDetail = ref(false)