feat: 过长文本截断,调整日期组件防止换行

songshankun

2023-11-06 61dedbff9e9965eda9c91be5cc0e64f0db7db22e

 src/views/dashboard/components/ProcessInfo.vue

@@ -3,33 +3,45 @@
    <div class="item-l-bng">
      <img src="~@/assets/images/process-model.png" />
    </div>
    <div class="item-r">
      <div class="item-r-t font_weight">{{ process.number }}</div>
      <div class="item-r-b">{{ process.name }}</div>
      <div class="item-r-b">{{ process.name }}</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 class="tip-r">
    <div v-if="craftModel.isUpdate" class="tip-r">
      <img src="~@/assets/images/process-tip.png" />
    </div>
    <div class="tip-current">当前使用</div>
    <div v-if="craftModel.isUpdate" class="tip-current">当前使用</div>
    <div class="btn">
      <el-button type="primary" class="color_organge"> 更新工艺</el-button>
      <el-button type="primary" @click="onUpdateClick"> 更新工艺 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, toRefs } from 'vue'
export interface ProcessInfoProps {
  process?: process
}
import { toRefs } from 'vue'
import type { CraftModel } from '@/api/craftModel'
const props = defineProps<{
  craftModel: CraftModel
}>()
const { craftModel } = toRefs(props)

const props = defineProps<ProcessInfoProps>()
const { process } = toRefs(props)
const emit = defineEmits<{
  update: [craftModel: CraftModel]
  detail: [craftModel: CraftModel]
}>()

function onDetailClick() {
  emit('detail', craftModel.value)
}
function onUpdateClick() {
  emit('update', craftModel.value)
}
</script>

<style scoped lang="scss">
$status-running: #f76c0f;
$status-done: #2c5dbb82;
$status-ready: #00ff00f0;
.font_weight {
  font-weight: 600;
}
@@ -39,7 +51,7 @@
  padding: 23px 10px 10px;
  background: $status-done;
  border-radius: 8px;
  float: left;
  //float: left;
  overflow: hidden;
  font-size: 15px;
  position: relative;
@@ -88,7 +100,7 @@
  }

  .tip-current {
    background: green;
    background: $status-ready;
    color: #fff;
    position: absolute;
    top: 0px;