syntec3-0-ui-components-test 1.0.0

package/src/views/review_record/components/materialInfo.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-popover placement="right" :width="400">
+    <template #reference>
+      {{ rowData.partNumber }}
+    </template>
+    <template #default>
+      <div class="popoverContent">
+        <div class="popoverHeader">物料详情</div>
+        <el-form label-width="auto" style="width: 100%">
+          <el-form-item label="物料名称">
+            <el-input :value="rowData.partName" readonly />
+          </el-form-item>
+          <el-form-item label="规格型号">
+            <el-input :value="rowData.materialSpec" readonly />
+          </el-form-item>
+          <el-form-item label="预览">
+            <el-input value="此物料无图片预览" readonly />
+          </el-form-item>
+        </el-form>
+      </div>
+    </template>
+  </el-popover>
+</template>
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  row: {
+    type: Object,
+    default: () => ({}),
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+const rowData = computed(() => {
+  return props.row;
+});
+</script>
+<style lang="scss" scoped>
+.popoverContent {
+  padding-inline: 10px;
+  .popoverHeader {
+    padding-block: 10px;
+    border-bottom: solid 1px;
+    text-align: center;
+    margin-bottom: 15px;
+  }
+}
+</style>

package/src/views/review_record/components/rootCause.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-popover placement="right" :width="400">
+    <template #reference>
+      <el-button color="#626aef" plain size="small">查看</el-button>
+    </template>
+    <template #default>
+      <div class="popoverContent">
+        <el-table :data="rowData.defectiveProducts" border>
+          <el-table-column :min-width="150" property="defectiveProductsReason" label="不良原因名称" align="center" />
+          <el-table-column :min-width="100" property="defectiveProductsCount" label="数量" align="center" />
+        </el-table>
+      </div>
+    </template>
+  </el-popover>
+</template>
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  row: {
+    type: Object,
+    default: () => ({}),
+  },
+  index: {
+    type: Number,
+    default: 0,
+  },
+});
+const rowData = computed(() => {
+  return props.row;
+});
+</script>
+<style lang="scss" scoped>
+.popoverContent {
+  padding-inline: 10px;
+  .popoverHeader {
+    padding-block: 10px;
+    border-bottom: solid 1px;
+    text-align: center;
+    margin-bottom: 15px;
+  }
+}
+</style>

package/src/views/review_record/components/workDetail.vue

@@ -0,0 +1,115 @@
+<template>
+  <el-dialog v-model="pageData.dialogTableVisible" title="工单详情" width="60%">
+    <div style="height: 50vh">
+      <tableContent
+        ref="tableContentRef"
+        :table-data="pageData.dataList"
+        :columns="tableColumns"
+        :show-pagination="false"
+        :table-actions-width="0"
+        :show-selection="false"
+        :column-min-width="120"
+      >
+      </tableContent>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+import { reactive, computed, ref, nextTick } from 'vue';
+import tableContent from '@/components/customTable/components/tableContent/index.vue';
+const tableContentRef = ref();
+const pageData = reactive({
+  dataList: [
+    {
+      status: 1,
+      reportEmp: '张三',
+      orderNumber: 10001,
+      partCount: 12,
+    },
+    {
+      status: 2,
+      reportEmp: '李四',
+      orderNumber: 10002,
+      partCount: 13,
+    },
+  ],
+  dialogTableVisible: false,
+});
+function formatStatus(status) {
+  switch (status) {
+    case 1:
+      return {
+        bgColor: '#1E88E5',
+        textColor: '#E3F2FD',
+        text: '待审核',
+      };
+    case 2:
+      return {
+        bgColor: 'rgb(224, 242, 241)',
+        textColor: 'rgb(96, 189, 181)',
+        text: '审核通过',
+      };
+    case 3:
+      return {
+        bgColor: 'rgb(238, 238, 238)',
+        textColor: 'rgb(167, 167, 167)',
+        text: '审核不通过',
+      };
+    default:
+      break;
+  }
+}
+const tableColumns = computed(() => [
+  {
+    text: '审核状态',
+    value: 'status',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+    formatterType: 'tags',
+    formatter: (row) => formatStatus(row.status),
+  },
+  {
+    text: '报工人员',
+    value: 'reportEmp',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '生产工单号',
+    value: 'orderNumber',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+  {
+    text: '生产数量',
+    value: 'partCount',
+    isFixed: false, // 是否固定列
+    isShown: true, // 是否显示隐藏
+    disabled: false, // 是否禁用
+    freeze: false, // 是否冻结列
+    customizeFields: false,
+  },
+]);
+function open() {
+  pageData.dialogTableVisible = true;
+  nextTick(() => {
+    console.log(tableContentRef.value.tableRef);
+  });
+}
+function close() {
+  pageData.dialogTableVisible = false;
+}
+defineExpose({
+  open,
+  close,
+});
+</script>