|
@@ -0,0 +1,164 @@
|
|
|
+<template>
|
|
|
+ <my-drawer
|
|
|
+ class="sop-dialog"
|
|
|
+ :visible="visible"
|
|
|
+ :header="title"
|
|
|
+ size="85%"
|
|
|
+ attach="body"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ :closeOnOverlayClick="false"
|
|
|
+ :close-btn="true"
|
|
|
+ @close="visible = false"
|
|
|
+ >
|
|
|
+ <t-collapse class="sop-step-mid" defaultExpandAll>
|
|
|
+ <t-collapse-panel disabled>
|
|
|
+ <template #expandIcon></template>
|
|
|
+ <template #header>
|
|
|
+ 项目派单信息(派单号:{{ dispatchInfo.crmNo }})
|
|
|
+ </template>
|
|
|
+ <t-form colon label-width="72px">
|
|
|
+ <t-row :gutter="[0, 4]">
|
|
|
+ <t-col :span="4">
|
|
|
+ <t-form-item label="客户经理">{{
|
|
|
+ dispatchInfo.crmUserName
|
|
|
+ }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="4">
|
|
|
+ <t-form-item label="项目名称">{{
|
|
|
+ dispatchInfo.name
|
|
|
+ }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="4">
|
|
|
+ <t-form-item label="客户类型">教务处</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="4">
|
|
|
+ <t-form-item label="客户名称">{{
|
|
|
+ dispatchInfo.custom
|
|
|
+ }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="4">
|
|
|
+ <t-form-item label="实施产品">{{
|
|
|
+ dispatchInfo.product
|
|
|
+ }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ <t-col :span="4">
|
|
|
+ <t-form-item label="服务单元">{{
|
|
|
+ dispatchInfo.service
|
|
|
+ }}</t-form-item>
|
|
|
+ </t-col>
|
|
|
+ </t-row>
|
|
|
+ </t-form>
|
|
|
+ </t-collapse-panel>
|
|
|
+ </t-collapse>
|
|
|
+ <div class="btn-box mt-10px">
|
|
|
+ <t-button @click="toCreateSop">创建sop</t-button>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10px">
|
|
|
+ <t-table
|
|
|
+ size="small"
|
|
|
+ row-key="index"
|
|
|
+ :columns="columns"
|
|
|
+ :data="sopList"
|
|
|
+ bordered
|
|
|
+ >
|
|
|
+ <template #operate="{ row }">
|
|
|
+ <div class="table-operations" @click.stop>
|
|
|
+ <t-link theme="primary" hover="color" @click="allocation(row)">
|
|
|
+ 人员配置
|
|
|
+ </t-link>
|
|
|
+ <t-link theme="primary" hover="color" @click="editSopItem(row)">
|
|
|
+ 编辑
|
|
|
+ </t-link>
|
|
|
+ <t-link theme="primary" hover="color"> 发布 </t-link>
|
|
|
+ <t-link theme="primary" hover="color"> 删除 </t-link>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </t-table>
|
|
|
+ </div>
|
|
|
+ <CreateSopItem
|
|
|
+ v-model:visible="showCreateDialog"
|
|
|
+ :curRow="curRow"
|
|
|
+ @confirm="addSopItem"
|
|
|
+ ></CreateSopItem>
|
|
|
+
|
|
|
+ <AllocationDialog
|
|
|
+ v-model:visible="showAllocationDialog"
|
|
|
+ :curRow="curRow"
|
|
|
+ :dispatchInfo="dispatchInfo"
|
|
|
+ ></AllocationDialog>
|
|
|
+ </my-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" name="CreateSop" setup>
|
|
|
+import { computed, ref } from 'vue';
|
|
|
+import { useVModel } from '@vueuse/core';
|
|
|
+import CreateSopItem from './create-sop-item.vue';
|
|
|
+import AllocationDialog from './allocation-dialog.vue';
|
|
|
+const showAllocationDialog = ref(false);
|
|
|
+const props = defineProps({
|
|
|
+ modelValue: Boolean,
|
|
|
+ type: String,
|
|
|
+ dispatchInfo: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+const emit = defineEmits(['update:modelValue', 'confirm']);
|
|
|
+const sopList = ref([
|
|
|
+ {
|
|
|
+ aaa: 'aaa',
|
|
|
+ bbb: 'bbb',
|
|
|
+ ccc: 'ccc',
|
|
|
+ ddd: 'ddd',
|
|
|
+ eee: 'eee',
|
|
|
+ fff: 1714492800000,
|
|
|
+ ggg: 1714586400000,
|
|
|
+ hhh: 1716231780000,
|
|
|
+ iii: 1717167600000,
|
|
|
+ },
|
|
|
+]);
|
|
|
+const visible = useVModel(props, 'modelValue', emit);
|
|
|
+const title = computed(() => {
|
|
|
+ if (props.type === 'new') return '新增SOP';
|
|
|
+ if (props.type === 'edit') return '编辑SOP';
|
|
|
+});
|
|
|
+const columns = [
|
|
|
+ { colKey: 'aaa', title: '科目名称' },
|
|
|
+ { colKey: 'bbb', title: '考生人数' },
|
|
|
+ { colKey: 'ccc', title: '联系人' },
|
|
|
+ { colKey: 'ddd', title: '电话' },
|
|
|
+ { colKey: 'eee', title: '服务范围' },
|
|
|
+ { colKey: 'fff', title: '扫描开始时间' },
|
|
|
+ { colKey: 'ggg', title: '扫描结束时间' },
|
|
|
+ { colKey: 'hhh', title: '评卷开始时间' },
|
|
|
+ { colKey: 'iii', title: '评卷结束时间' },
|
|
|
+ {
|
|
|
+ colKey: 'operate',
|
|
|
+ title: '管理',
|
|
|
+ fixed: 'right',
|
|
|
+ width: 250,
|
|
|
+ cell: 'operate',
|
|
|
+ },
|
|
|
+];
|
|
|
+const showCreateDialog = ref(false);
|
|
|
+const curRow = ref(null);
|
|
|
+const toCreateSop = () => {
|
|
|
+ showCreateDialog.value = true;
|
|
|
+};
|
|
|
+const addSopItem = (item) => {
|
|
|
+ sopList.value.push(item);
|
|
|
+};
|
|
|
+const editSopItem = (row) => {
|
|
|
+ curRow.value = row;
|
|
|
+ showCreateDialog.value = true;
|
|
|
+};
|
|
|
+const allocation = (row) => {
|
|
|
+ curRow.value = row;
|
|
|
+ showAllocationDialog.value = true;
|
|
|
+};
|
|
|
+const stepConfirm = () => {
|
|
|
+ emit('confirm');
|
|
|
+};
|
|
|
+</script>
|