<template>
|
<div class="process-info">
|
<div class="item-l-bng">
|
<img src="~@/assets/images/process-model.png" />
|
</div>
|
<div class="item-r" @click="onDetailClick">
|
<div class="item-r-t font_weight">{{ craftModel.number }}</div>
|
<div class="item-r-b">产品: {{ craftModel.product }}</div>
|
<div class="item-r-b">工艺: {{ craftModel.procedure }}</div>
|
</div>
|
<div v-if="craftModel.isUpdate" class="tip-r">
|
<img src="~@/assets/images/process-tip.png" />
|
</div>
|
<div v-if="craftModel.number == task?.Procedure?.processModelNumber" class="tip-current">当前使用</div>
|
<div class="btn">
|
<el-button
|
type="primary"
|
:loading="loading"
|
:disabled="craftModel.isUpdate ? false : true"
|
@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, 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: string[]
|
task?: Task
|
}>()
|
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
|
return true
|
}
|
}
|
loading.value = false
|
}
|
function onDetailClick() {
|
emit('detail', craftModel.value)
|
}
|
function onUpdateClick() {
|
if (loading.value) {
|
return true
|
}
|
emit('update', craftModel.value)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
$status-running: #f76c0f;
|
$status-done: #2c5dbb82;
|
$status-ready: #00ff00f0;
|
$status-disabled: #7b95d3;
|
.font_weight {
|
font-weight: 600;
|
}
|
.process-info {
|
width: calc(50% - 10px);
|
height: 140px;
|
padding: 23px 5px 10px 10px;
|
background: $status-done;
|
border-radius: 8px;
|
//float: left;
|
overflow: hidden;
|
font-size: 15px;
|
position: relative;
|
margin-bottom: 30px;
|
|
&:nth-of-type(odd) {
|
margin-right: 20px;
|
}
|
|
.item-l-bng {
|
width: 40px;
|
float: left;
|
margin-right: 20px;
|
|
img {
|
width: 100%;
|
}
|
}
|
.refresh-top-icon {
|
display: flex;
|
align-items: center;
|
color: #fff;
|
}
|
|
.item-r {
|
width: calc(100% - 60px);
|
float: left;
|
line-height: 25px;
|
color: #fff;
|
font-size: 16px;
|
cursor: pointer;
|
|
.item-r-t {
|
font-size: 16px;
|
}
|
|
.item-r-b {
|
font-size: 14px;
|
}
|
}
|
|
.tip-r {
|
position: absolute;
|
top: 5px;
|
right: 15px;
|
width: 20px;
|
|
img {
|
width: 100%;
|
}
|
}
|
|
.tip-current {
|
background: $status-ready;
|
color: #fff;
|
position: absolute;
|
top: 0px;
|
left: 70px;
|
width: auto;
|
padding: 2px 15px;
|
font-size: 12px;
|
border-radius: 0px 0px 6px 6px;
|
}
|
|
.btn {
|
width: 95px;
|
position: absolute;
|
right: 15px;
|
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>
|
