<template>
|
<div class="Craftcenter">
|
<div class="content">
|
<div class="content-list">
|
<div class="list_top">
|
<div class="list_top_left">
|
<span
|
style="
|
width: 3.13rem;
|
height: 3.13rem;
|
background-color: #ffbf00;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
<img
|
style="width: 1.5rem; height: 1.5rem"
|
src="@/assets/index/icon/icon.png"
|
alt=""
|
/>
|
</span>
|
</div>
|
<div class="list_top_right">
|
<div style="font-size: 1rem">电气</div>
|
<div
|
style="
|
font-size: 0.88rem;
|
color: rgba(136, 137, 138, 1);
|
margin-top: 0.81rem;
|
"
|
>
|
<span>此为任务作用中电气的的详情步骤工艺。</span>
|
<div style="display: flex; margin-top: 0.81rem">
|
<span style="margin-right: 1.25rem">步骤：12</span>
|
<span>套筒数量：34</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="list_bottom">
|
<div
|
style="
|
color: rgba(67, 134, 255, 1);
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
@click="showdetails('电气')"
|
>
|
工艺明细
|
</div>
|
<span
|
style="width: 0.06rem; height: 1.5rem; background-color: #d9d9d9"
|
></span>
|
<div
|
style="
|
color: rgba(67, 134, 255, 1);
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
@click="addcraft()"
|
>
|
新增工艺
|
</div>
|
</div>
|
</div>
|
<div class="content-list">
|
<div class="list_top">
|
<div class="list_top_left">
|
<span
|
style="
|
width: 3.13rem;
|
height: 3.13rem;
|
background-color: #5bd171;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
<img
|
style="width: 1.5rem; height: 1.5rem"
|
src="@/assets/index/icon/icon.png"
|
alt=""
|
/>
|
</span>
|
</div>
|
<div class="list_top_right">
|
<div style="font-size: 1rem">机械</div>
|
<div
|
style="
|
font-size: 0.88rem;
|
color: rgba(136, 137, 138, 1);
|
margin-top: 0.81rem;
|
"
|
>
|
<span>此为任务作用中机械的的详情步骤工艺。</span>
|
<div style="display: flex; margin-top: 0.81rem">
|
<span style="margin-right: 1.25rem">步骤：12</span>
|
<span>套筒数量：34</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="list_bottom">
|
<div
|
style="
|
color: rgba(67, 134, 255, 1);
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
@click="showdetails('机械')"
|
>
|
工艺明细
|
</div>
|
<span
|
style="width: 0.06rem; height: 1.5rem; background-color: #d9d9d9"
|
></span>
|
<div
|
style="
|
color: rgba(67, 134, 255, 1);
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
@click="addcraft()"
|
>
|
新增工艺
|
</div>
|
</div>
|
</div>
|
<div class="content-list">
|
<div class="list_top">
|
<div class="list_top_left">
|
<span
|
style="
|
width: 3.13rem;
|
height: 3.13rem;
|
background-color: #2c92f6;
|
border-radius: 50%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
"
|
>
|
<img
|
style="width: 1.5rem; height: 1.5rem"
|
src="@/assets/index/icon/icon.png"
|
alt=""
|
/>
|
</span>
|
</div>
|
<div class="list_top_right">
|
<div style="font-size: 1rem">地沟</div>
|
<div
|
style="
|
font-size: 0.88rem;
|
color: rgba(136, 137, 138, 1);
|
margin-top: 0.81rem;
|
"
|
>
|
<span>此为任务作用中地沟的的详情步骤工艺。</span>
|
<div style="display: flex; margin-top: 0.81rem">
|
<span style="margin-right: 1.25rem">步骤：12</span>
|
<span>套筒数量：34</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="list_bottom">
|
<div
|
style="
|
color: rgba(67, 134, 255, 1);
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
@click="showdetails('地沟')"
|
>
|
工艺明细
|
</div>
|
<span
|
style="width: 0.06rem; height: 1.5rem; background-color: #d9d9d9"
|
></span>
|
<div
|
style="
|
color: rgba(67, 134, 255, 1);
|
font-size: 0.88rem;
|
cursor: pointer;
|
"
|
@click="addcraft()"
|
>
|
新增工艺
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 工艺明细弹出框 -->
|
<el-dialog
|
v-model="detailsDialogVisible"
|
title="电气"
|
:close-on-click-modal="false"
|
width="98%"
|
top="10vh"
|
:modal="false"
|
:show-close="false"
|
>
|
<template #header="{ close, titleId, titleClass }">
|
<div class="my-header">
|
<h4
|
:id="titleId"
|
:class="titleClass"
|
style="font-size: 1.2rem; font-weight: bold"
|
>
|
{{ title }}
|
</h4>
|
<el-icon size="25" @click="close"><CloseBold /></el-icon>
|
</div>
|
</template>
|
<div>
|
<div class="head">
|
<div class="serch">
|
<div class="time_box">
|
<div class="time">创建日期</div>
|
<el-date-picker
|
v-model="queryForm.selectTime"
|
prefix-icon="none"
|
clear-icon="none"
|
style="
|
font-size: 0.75rem !important;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0 0.25rem 0.25rem 0;
|
box-shadow: none;
|
width: 19rem;
|
height: 2rem;
|
border-left: 0;
|
"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
type="datetimerange"
|
range-separator="~"
|
start-placeholder="起始日期"
|
end-placeholder="截止日期"
|
size="small"
|
/>
|
</div>
|
<div class="serch_box">
|
<div class="serchb">全局搜索</div>
|
<input
|
v-model="queryForm.selectName"
|
placeholder="请输入关键词搜索"
|
style="border-left: 0.06rem solid #e2e2e2"
|
/>
|
</div>
|
<el-button
|
type="primary"
|
size="small"
|
style="height: 2rem; margin-left: 0.98rem"
|
@click="clicksearch"
|
>查询</el-button
|
>
|
<el-button
|
size="small"
|
@click="clickreset"
|
style="height: 2rem; font-size: 0.88rem"
|
>重置</el-button
|
>
|
</div>
|
<el-button style="width: 5rem; height: 2rem; margin-top: 1.13rem"
|
>批量导出</el-button
|
>
|
</div>
|
<el-table
|
style="margin-top: 1.13rem"
|
:data="gridData"
|
height="430"
|
:header-cell-style="{
|
background: 'rgba(250,250,250,1)',
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: '0.01rem solid #eee',
|
}"
|
:row-style="{
|
color: '#101010',
|
fontSize: '0.88rem',
|
height: '3rem',
|
border: '0.01rem solid #eee',
|
}"
|
:cell-style="{
|
border: '0.01rem solid #eee',
|
}"
|
>
|
<el-table-column prop="date" label="序号" min-width="2%" />
|
<el-table-column prop="date" label="工艺顶点/步骤" min-width="3%" />
|
<el-table-column prop="date" label="工艺内容" min-width="5%" />
|
<el-table-column prop="date" label="工具" min-width="2%" />
|
<el-table-column prop="date" label="物料" min-width="1%" />
|
<el-table-column prop="date" label="图片视频" min-width="2%" />
|
<el-table-column prop="date" label="是否涉及" min-width="2%" />
|
<el-table-column prop="date" label="排序" min-width="1%" />
|
<el-table-column prop="date" label="创建人" min-width="1%" />
|
<el-table-column prop="date" label="创建日期" min-width="2%" />
|
<el-table-column label="操作" min-width="3%">
|
<template #default="scope">
|
<el-button
|
type="text"
|
size="small"
|
@click="Editcraft(scope.row, '编辑')"
|
>编辑</el-button
|
>
|
<el-button type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
|
<!-- 新增工艺/编辑工艺 -->
|
<el-dialog
|
top="1%"
|
v-model="craftdialogVisible"
|
title="工艺信息"
|
width="50%"
|
:before-close="handleClose"
|
:show-close="false"
|
>
|
<template #header="{ titleId, titleClass }">
|
<div class="my-craftheader">
|
<h4
|
:id="titleId"
|
:class="titleClass"
|
style="font-size: 1.2rem; font-weight: bold"
|
>
|
工艺信息（{{ title }}）
|
</h4>
|
</div>
|
</template>
|
<el-form
|
:model="form"
|
label-width="auto"
|
label-position="top"
|
:rules="rules"
|
>
|
<el-row :gutter="10">
|
<el-col :span="16"
|
><el-form-item prop="DeviceName">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black"
|
>工艺顶点/步骤</span
|
>
|
</template>
|
<el-input
|
size="small"
|
v-model="form.DeviceName"
|
placeholder="请输入"
|
style="height: 2rem"
|
/> </el-form-item
|
></el-col>
|
<el-col :span="8"
|
><el-form-item prop="DeviceCode">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black">物料</span>
|
</template>
|
<el-select
|
v-model="value"
|
placeholder="请选择"
|
size="small"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select> </el-form-item
|
></el-col>
|
</el-row>
|
<el-row :gutter="10">
|
<el-col :span="8"
|
><el-form-item prop="Unit">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black">是否涉及</span>
|
</template>
|
<el-select
|
v-model="value"
|
placeholder="请选择"
|
size="small"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select> </el-form-item
|
></el-col>
|
<el-col :span="8"
|
><el-form-item prop="Description">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black">排序</span>
|
</template>
|
<el-select
|
v-model="value"
|
placeholder="请选择"
|
size="small"
|
style="width: 240px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select> </el-form-item
|
></el-col>
|
<el-col :span="8"
|
><el-form-item prop="Description">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black">工具</span>
|
</template>
|
<el-cascader
|
size="small"
|
style="width: 240px"
|
:options="options"
|
:props="props"
|
clearable /></el-form-item
|
></el-col>
|
</el-row>
|
<!-- <el-row>
|
<el-form-item prop="Unit">
|
<template #label
|
><span style="font-size: 0.88rem; color: black"
|
>图片视频</span
|
></template
|
>
|
<el-upload
|
class="avatar-uploader"
|
action="#"
|
list-type="picture-card"
|
:auto-upload="false"
|
>
|
<el-icon><Plus /></el-icon>
|
|
<template #file="{ file }">
|
<div>
|
<img
|
class="el-upload-list__item-thumbnail"
|
:src="file.url"
|
alt=""
|
/>
|
<span class="el-upload-list__item-actions">
|
<span
|
class="el-upload-list__item-preview"
|
@click="handlePictureCardPreview(file)"
|
>
|
<el-icon size="15"><zoom-in /></el-icon>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleDownload(file)"
|
>
|
<el-icon size="15"><Download /></el-icon>
|
</span>
|
<span
|
v-if="!disabled"
|
class="el-upload-list__item-delete"
|
@click="handleRemove(file)"
|
>
|
<el-icon size="15"><Delete /></el-icon>
|
</span>
|
</span>
|
</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
</el-row> -->
|
<el-row>
|
<h4
|
style="
|
color: rgba(16, 16, 16, 1);
|
font-size: 1.13rem;
|
font-weight: bold;
|
"
|
>
|
工艺内容
|
</h4>
|
</el-row>
|
<el-row>
|
<el-col>
|
<el-form-item prop="Unit">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black">内容描述</span>
|
</template>
|
<el-input v-model="input" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-form-item prop="Unit">
|
<template #label>
|
<span style="font-size: 0.88rem; color: black">内容描述</span>
|
</template>
|
<div
|
style="
|
display: flex;
|
justify-content: space-between;
|
width: 32.5rem;
|
height: 25rem;
|
"
|
>
|
<div style="width: 50%; height: 100%; background: #f5f5f5">
|
<div
|
style="
|
padding: 0.88rem 0.88rem 0 0.88rem;
|
box-sizing: border-box;
|
"
|
>
|
<el-input
|
placeholder="请输入内容"
|
style="height: 2rem"
|
></el-input>
|
<div
|
style="height: 1.25rem; display: flex; align-items: center"
|
>
|
<span
|
style="color: rgba(28, 31, 35, 0.8); font-size: 0.75rem"
|
>共0项</span
|
><span
|
style="
|
color: rgba(28, 31, 35, 0.8);
|
font-size: 0.75rem;
|
margin-left: 0.38rem;
|
"
|
>全选</span
|
>
|
</div>
|
</div>
|
<el-scrollbar height="20rem" style="padding-left: 0.88rem">
|
<p v-for="item in 0" :key="item" class="scrollbar-demo-item">
|
{{ item }}
|
</p>
|
</el-scrollbar>
|
</div>
|
<div style="width: 50%; height: 100%">
|
<div
|
style="padding: 0.88rem 0 0 0.88rem; box-sizing: border-box"
|
>
|
<span style="color: rgb(167, 171, 176); font-size: 0.88rem"
|
>已选0项</span
|
>
|
<span
|
style="
|
color: rgb(65, 70, 76);
|
font-size: 0.88rem;
|
margin-left: 1rem;
|
"
|
>清空</span
|
>
|
</div>
|
<el-scrollbar
|
height="calc(25rem - 44.15px)"
|
style="padding-left: 0.88rem"
|
>
|
<p v-for="item in 0" :key="item" class="scrollbar-demo-item">
|
{{ item }}
|
</p>
|
</el-scrollbar>
|
</div>
|
</div>
|
</el-form-item>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer" style="text-align: center">
|
<el-button @click="craftdialogVisible = false" style="height: 2rem"
|
>取消</el-button
|
>
|
<el-button
|
type="primary"
|
@click="craftdialogVisible = false"
|
style="height: 2rem"
|
>
|
保存
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { GetSleeveandStep } from "@/api/newapi/Process";
|
//工艺明细弹出框
|
const detailsDialogVisible = ref(false);
|
//
|
const gridData = ref([]);
|
//电气数量
|
const electric = ref({});
|
//搜索
|
const queryForm = reactive({
|
selectName: "",
|
selectTime: [], // 时间范围
|
});
|
const title = ref("电气");
|
const showdetails = (val) => {
|
detailsDialogVisible.value = true;
|
title.value = val;
|
};
|
//新增工艺/编辑工艺
|
const craftdialogVisible = ref(false);
|
const type = ref("新增");
|
const form = reactive({
|
DeviceName: "",
|
DeviceCode: "",
|
Spec: "",
|
Unit: "",
|
Description: "",
|
});
|
const props = { multiple: true };
|
|
//新增工艺
|
const addcraft = (row) => {
|
type.value = "新增";
|
craftdialogVisible.value = true;
|
console.log(row, type);
|
};
|
//编辑工艺
|
const Editcraft = (row) => {
|
type.value = "编辑";
|
detailsDialogVisible.value = false;
|
craftdialogVisible.value = true;
|
console.log(row, type);
|
};
|
//图片上传
|
const dialogImageUrl = ref("");
|
const dialogVisible = ref(false);
|
const disabled = ref(false);
|
|
const handleRemove = (file) => {
|
console.log(file);
|
};
|
|
const handlePictureCardPreview = (file) => {
|
dialogImageUrl.value = file.url;
|
dialogVisible.value = true;
|
};
|
|
const handleDownload = (file) => {
|
console.log(file);
|
};
|
onMounted(() => {
|
GetSleeveandStep("电气").then((res) => {
|
console.log("123", res);
|
});
|
GetSleeveandStep("机械").then((res) => {
|
console.log("123", res);
|
});
|
GetSleeveandStep("地沟").then((res) => {
|
console.log("123", res);
|
});
|
});
|
</script>
|
<style lang="scss" scoped>
|
.Craftcenter {
|
display: flex;
|
justify-content: center;
|
background-color: rgba(0, 0, 0, 0.3);
|
.content {
|
display: flex;
|
justify-content: space-between;
|
|
margin-top: 5.88rem;
|
width: 75rem;
|
.content-list {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 22.69rem;
|
height: 11.44rem;
|
background-color: #fff;
|
.list_top {
|
display: flex;
|
padding: 1.38rem 1.38rem;
|
box-sizing: border-box;
|
.list_top_left {
|
margin-right: 0.94rem;
|
}
|
}
|
.list_bottom {
|
height: 3.06rem;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
border: 0.06rem solid rgba(217, 217, 217, 1);
|
box-sizing: border-box;
|
padding: 0 4rem;
|
}
|
}
|
}
|
.my-header {
|
height: 3.94rem;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
gap: 1rem;
|
padding-left: 2.06rem;
|
border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
|
}
|
.serch {
|
display: flex;
|
align-items: center;
|
.time_box {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
|
.time {
|
box-sizing: border-box;
|
width: 6.88rem;
|
height: 2rem;
|
text-align: center;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0.25rem 0 0 0.25rem;
|
font-size: 0.75rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.serch_box {
|
display: flex;
|
align-items: center;
|
text-align: center;
|
margin-left: 0.98rem;
|
border-radius: 0.38rem;
|
.serchb {
|
box-sizing: border-box;
|
width: 6.88rem;
|
height: 2rem;
|
text-align: center;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0.25rem 0 0 0.25rem;
|
font-size: 0.75rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
input {
|
box-sizing: border-box;
|
outline: none;
|
width: 19rem;
|
height: 2rem;
|
border: 0.06rem solid rgba(222, 222, 222, 1);
|
border-radius: 0 0.25rem 0.25rem 0;
|
padding-left: 0.3125rem;
|
font-size: 1rem;
|
}
|
}
|
}
|
.my-craftheader {
|
height: 3.94rem;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
gap: 1rem;
|
border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
|
}
|
}
|
.avatar-uploader .avatar {
|
width: 7rem;
|
height: 7rem;
|
display: block;
|
}
|
:deep(.avatar-uploader .el-upload) {
|
width: 7rem;
|
height: 7rem;
|
border: 0.0625rem dashed var(--el-border-color);
|
border-radius: 0.0375rem;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
transition: var(--el-transition-duration-fast);
|
}
|
:deep(.el-upload-list__item) {
|
width: 7rem;
|
height: 7rem;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: var(--el-color-primary);
|
}
|
|
.el-icon .avatar-uploader-icon {
|
font-size: 0.5rem;
|
color: #8c939d;
|
width: 0.81rem;
|
height: 0.81rem;
|
text-align: center;
|
}
|
</style>
|
