1.1.0静态页面开发

src/components/common/device-manage-new/index.vue

@@ -46,12 +46,23 @@
       </t-collapse-panel>
     </t-collapse>
 
-    <div class="mt-10px"> </div>
+    <div class="mt-10px">
+      <t-tabs v-model="curStep">
+        <t-tab-panel value="设备签收登记" label="设备签收登记">
+          <Tab1 />
+        </t-tab-panel>
+        <t-tab-panel value="设备去处登记" label="设备去处登记"
+          ><Tab2 />
+        </t-tab-panel>
+      </t-tabs>
+    </div>
   </my-drawer>
 </template>
 
 <script lang="ts" name="DeviceManageNew" setup>
 import { computed, ref } from 'vue';
+import Tab1 from './tab1.vue';
+import Tab2 from './tab2.vue';
 const props = defineProps({
   visible: Boolean,
   type: String,
@@ -62,5 +73,6 @@ const props = defineProps({
     },
   },
 });
+const curStep = ref('设备签收登记');
 const emit = defineEmits(['update:visible', 'confirm']);
 </script>

src/components/common/device-manage-new/tab1.vue

@@ -0,0 +1,106 @@
+<template>
+  <t-table
+    size="small"
+    row-key="id"
+    :columns="columns"
+    :data="tableData"
+    bordered
+    class="mt-10px"
+  >
+    <template #ddd="{ row }">
+      {{ RUNNING_STATUS[row.ddd] }}
+    </template>
+    <template #operate="{ row }">
+      <div class="table-operations" @click.stop>
+        <t-link theme="primary" hover="color" @click="editStatus(row)"
+          >编辑状态</t-link
+        >
+      </div>
+    </template>
+  </t-table>
+  <my-dialog
+    :visible="showStatusDialog"
+    :header="`编辑状态`"
+    :width="400"
+    :closeOnOverlayClick="false"
+    attach="body"
+    @close="showStatusDialog = false"
+    @confirm="statusConfirm"
+  >
+    <SearchForm
+      :params="statusParams"
+      :fields="statusFields"
+      :rules="statusRules"
+      noBorder
+      ref="statusForm"
+    ></SearchForm>
+  </my-dialog>
+</template>
+<script name="DeviceManageNewTab1" setup>
+import { ref, reactive } from 'vue';
+import { RUNNING_STATUS } from '@/config/constants';
+import { dictToOptionList } from '@/utils/tool';
+
+const curRow = ref(null);
+
+const statusForm = ref();
+const showStatusDialog = ref(false);
+const statusParams = reactive({ aaa: '' });
+const statusFields = ref([
+  {
+    prop: 'aaa',
+    label: '选择状态',
+    type: 'select',
+    labelWidth: 70,
+    colSpan: 24,
+    options: dictToOptionList(RUNNING_STATUS),
+  },
+]);
+const statusRules = ref({
+  aaa: [{ required: true, message: '请选择设备状态' }],
+});
+const statusConfirm = async () => {
+  const formRef = statusForm.value.formRef;
+  const valid = await formRef?.validate();
+  if (valid !== true) return;
+  //todo
+
+  showStatusDialog.value = false;
+};
+const editStatus = (row) => {
+  curRow.value = row;
+  showStatusDialog.value = true;
+};
+const columns = [
+  {
+    colKey: 'serial-number',
+    title: '序号',
+    width: 48,
+  },
+  { colKey: 'aaa', title: '派单号' },
+  { colKey: 'bbb', title: '设备序列号' },
+  { colKey: 'ccc', title: '设备型号' },
+  { colKey: 'ddd', title: '状态', cell: 'ddd' },
+  { colKey: 'eee', title: '设备归属' },
+  { colKey: 'fff', title: '出库快递单号' },
+  { colKey: 'ggg', title: '签收状态' },
+  {
+    title: '管理',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 180,
+  },
+];
+const tableData = ref([
+  {
+    aaa: 'aaa',
+    bbb: 'bbb',
+    ccc: 'ccc',
+    ddd: 'BREAK_DOWN',
+    eee: 'eee',
+    fff: 'fff',
+    ggg: 'ggg',
+  },
+]);
+</script>
+<style lang="less" scoped></style>

src/components/common/device-manage-new/tab2.vue

@@ -0,0 +1,300 @@
+<template>
+  <t-table
+    size="small"
+    row-key="id"
+    :columns="columns"
+    :data="tableData"
+    bordered
+    class="mt-10px"
+  >
+    <template #ddd="{ row }">
+      {{ RUNNING_STATUS[row.ddd] }}
+    </template>
+    <template #fff="{ row }">
+      {{ DEVICE_USE_STATUS[row.fff] }}
+    </template>
+    <template #operate="{ row }">
+      <div class="table-operations" @click.stop>
+        <t-link theme="primary" hover="color" @click="enter(row)">入库</t-link>
+        <t-link theme="primary" hover="color" @click="middle(row)">中转</t-link>
+        <t-link theme="primary" hover="color" @click="edit(row)">编辑</t-link>
+      </div>
+    </template>
+  </t-table>
+  <my-dialog
+    :visible="showEnterDialog"
+    :header="`入库`"
+    :width="400"
+    :closeOnOverlayClick="false"
+    attach="body"
+    @close="showEnterDialog = false"
+    @confirm="enterConfirm"
+  >
+    <SearchForm
+      :params="enterParams"
+      :fields="enterFields"
+      :rules="enterRules"
+      noBorder
+      ref="enterForm"
+    ></SearchForm>
+  </my-dialog>
+
+  <my-dialog
+    :visible="showMiddleDialog"
+    :header="`中转`"
+    :width="400"
+    :closeOnOverlayClick="false"
+    attach="body"
+    @close="showMiddleDialog = false"
+    @confirm="middleConfirm"
+  >
+    <SearchForm
+      :params="middleParams"
+      :fields="middleFields"
+      :rules="middleRules"
+      noBorder
+      ref="middleForm"
+    ></SearchForm>
+  </my-dialog>
+
+  <my-dialog
+    :visible="showEditDialog"
+    :header="`编辑`"
+    :width="400"
+    :closeOnOverlayClick="false"
+    attach="body"
+    @close="showEditDialog = false"
+    @confirm="editConfirm"
+  >
+    <SearchForm
+      :params="editParams"
+      :fields="editFields"
+      :rules="editRules"
+      noBorder
+      ref="editForm"
+    ></SearchForm>
+  </my-dialog>
+</template>
+<script name="DeviceManageNewTab2" setup>
+import { ref, computed } from 'vue';
+import { RUNNING_STATUS, DEVICE_USE_STATUS } from '@/config/constants';
+import { dictToOptionList } from '@/utils/tool';
+import { cloneDeep } from 'lodash';
+
+const curRow = ref(null);
+
+/**入库弹框 */
+const enterForm = ref();
+const showEnterDialog = ref(false);
+const initEnterParams = { aaa: '', bbb: '', ccc: '' };
+const enterParams = ref(cloneDeep(initEnterParams));
+const enterFields = ref([
+  {
+    prop: 'aaa',
+    label: '入库方式',
+    type: 'select',
+    labelWidth: 80,
+    colSpan: 24,
+    options: [
+      { value: '邮寄', label: '邮寄' },
+      { value: '其它', label: '其它' },
+    ],
+  },
+  {
+    prop: 'bbb',
+    label: '快递单号',
+    labelWidth: 80,
+    colSpan: 24,
+  },
+  {
+    prop: 'ccc',
+    label: '备注',
+    labelWidth: 80,
+    colSpan: 24,
+  },
+]);
+const enterRules = ref({
+  aaa: [{ required: true, message: '请选择入库方式' }],
+  bbb: [{ required: true, message: '请填写快递单号' }],
+});
+const enter = (row) => {
+  curRow.value = row;
+  enterParams.value = cloneDeep(initEnterParams);
+  showEnterDialog.value = true;
+};
+const enterConfirm = async () => {
+  const formRef = enterForm.value.formRef;
+  const valid = await formRef?.validate();
+  if (valid !== true) return;
+  //todo
+
+  showEnterDialog.value = false;
+};
+/***********/
+
+/**中转弹框 */
+const middleForm = ref();
+const showMiddleDialog = ref(false);
+const initMiddleParams = { aaa: '', bbb: '', ccc: '', ddd: '' };
+const middleParams = ref(cloneDeep(initMiddleParams));
+const middleFields = ref([
+  {
+    prop: 'aaa',
+    label: '中转方式',
+    type: 'select',
+    labelWidth: 80,
+    colSpan: 24,
+    options: [
+      { value: '邮寄', label: '邮寄' },
+      { value: '其它', label: '其它' },
+    ],
+  },
+  {
+    prop: 'bbb',
+    label: '快递单号',
+    labelWidth: 80,
+    colSpan: 24,
+  },
+  {
+    prop: 'ccc',
+    label: '备注',
+    labelWidth: 80,
+    colSpan: 24,
+  },
+  {
+    prop: 'ddd',
+    label: '接收方单号',
+    labelWidth: 80,
+    colSpan: 24,
+  },
+]);
+const middleRules = ref({
+  aaa: [{ required: true, message: '请选择中转方式' }],
+  bbb: [{ required: true, message: '请填写快递单号' }],
+  ddd: [{ required: true, message: '请填写接收方单号' }],
+});
+const middle = (row) => {
+  curRow.value = row;
+  middleParams.value = cloneDeep(initMiddleParams);
+  showMiddleDialog.value = true;
+};
+const middleConfirm = async () => {
+  const formRef = middleForm.value.formRef;
+  const valid = await formRef?.validate();
+  if (valid !== true) return;
+  //todo
+
+  showMiddleDialog.value = false;
+};
+
+/***********/
+
+/**编辑弹框 */
+const editForm = ref();
+const showEditDialog = ref(false);
+const initEditParams = { aaa: '', bbb: '', ccc: '', ddd: '', eee: '' };
+const editParams = ref(cloneDeep(initEditParams));
+const editFields = computed(() => {
+  return [
+    {
+      prop: 'aaa',
+      label: '使用状态',
+      type: 'select',
+      labelWidth: 90,
+      colSpan: 24,
+      options: [
+        { value: '中转', label: '中转' },
+        { value: '入库', label: '入库' },
+      ],
+    },
+    {
+      prop: 'bbb',
+      label: '中转方式',
+      type: 'select',
+      labelWidth: 90,
+      colSpan: 24,
+      options: [
+        { value: '邮寄', label: '邮寄' },
+        { value: '其它', label: '其它' },
+      ],
+    },
+    editParams.value.bbb === '邮寄'
+      ? {
+          prop: 'ccc',
+          label: '快递单号',
+          labelWidth: 90,
+          colSpan: 24,
+        }
+      : null,
+    editParams.value.aaa === '中转'
+      ? {
+          prop: 'ddd',
+          label: '接收方单号',
+          labelWidth: 90,
+          colSpan: 24,
+        }
+      : null,
+    editParams.value.bbb === '其它'
+      ? {
+          prop: 'eee',
+          label: '备注',
+          labelWidth: 90,
+          colSpan: 24,
+        }
+      : null,
+  ];
+});
+const editRules = ref({
+  aaa: [{ required: true, message: '请选择使用状态' }],
+  bbb: [{ required: true, message: '请选择中转方式' }],
+  ccc: [{ required: true, message: '请填写快递单号' }],
+  ddd: [{ required: true, message: '请填写接收方单号' }],
+});
+const edit = (row) => {
+  curRow.value = row;
+  editParams.value = cloneDeep(initEditParams);
+  showEditDialog.value = true;
+};
+const editConfirm = async () => {
+  const formRef = editForm.value.formRef;
+  const valid = await formRef?.validate();
+  if (valid !== true) return;
+  //todo
+
+  showEditDialog.value = false;
+};
+/***********/
+
+const columns = [
+  {
+    colKey: 'serial-number',
+    title: '序号',
+    width: 48,
+  },
+  { colKey: 'aaa', title: '设备序列号' },
+  { colKey: 'bbb', title: '设备型号' },
+  { colKey: 'ccc', title: '状态', cell: 'ccc' },
+  { colKey: 'ddd', title: '设备归属' },
+  { colKey: 'eee', title: '运输方式' },
+  { colKey: 'fff', title: '使用状态', cell: 'fff' },
+  { colKey: 'ggg', title: '接收方单号' },
+  {
+    title: '管理',
+    colKey: 'operate',
+    fixed: 'right',
+    width: 180,
+  },
+];
+const tableData = ref([
+  {
+    aaa: 'aaa',
+    bbb: 'bbb',
+    ccc: 'ccc',
+    ddd: 'BREAK_DOWN',
+    eee: 'eee',
+    fff: '1',
+    ggg: 'ggg',
+  },
+]);
+</script>
+<style lang="less" scoped></style>

src/components/global/search-form/index.vue

@@ -1,9 +1,6 @@
-//该组件适用于表格的查询条件等不太复杂的表单场景,通过透传props配置来驱动表单的渲染。
-//该组件具备栅格功能,既可以配置model,也可以配置宽度
-//其他较复杂的主页面表单场景还是简易手写组件和业务
 <template>
   <div
-    v-if="fields?.length"
+    v-if="filterFields?.length"
     class="table-search"
     :class="{ 'in-padding': inPadding, 'no-border': noBorder }"
   >
@@ -123,6 +120,18 @@ const props = defineProps({
   noBorder: { type: Boolean, default: false },
   rules: { type: Object, default: () => {} },
 });
+const filterFields = computed(() => {
+  let arr = cloneDeep(props.fields.filter((obj) => !!obj));
+  if (props.showAll) {
+    //假设配置为不显示展开按钮，则要考虑把"查询"按钮排到末尾端
+    let buttonsFieldIndex = arr.findIndex((item) => item.type === 'buttons');
+    if (buttonsFieldIndex > -1) {
+      let buttonsFieldArr = arr.splice(buttonsFieldIndex, 1);
+      arr.push(buttonsFieldArr[0]);
+    }
+  }
+  return arr;
+});
 //fields示例：（目前支持控件：input、select、dropdown按钮、treeSelect、date选择框、time选择框、timerange时间范围选择框、daterange日期范围选择框...后期可以按需求扩展）
 /*
 const fields = [
@@ -185,18 +194,18 @@ const fields = [
   },
 ];
 */
-if (props.showAll) {
-  //假设配置为不显示展开按钮，则要考虑把"查询"按钮排到末尾端
-  let buttonsFieldIndex = props.fields.findIndex(
-    (item) => item.type === 'buttons'
-  );
-  if (buttonsFieldIndex > -1) {
-    let buttonsFieldArr = props.fields.splice(buttonsFieldIndex, 1);
-    props.fields.push(buttonsFieldArr[0]);
-  }
-}
+// if (props.showAll) {
+//   //假设配置为不显示展开按钮，则要考虑把"查询"按钮排到末尾端
+//   let buttonsFieldIndex = props.fields.findIndex(
+//     (item) => item.type === 'buttons'
+//   );
+//   if (buttonsFieldIndex > -1) {
+//     let buttonsFieldArr = props.fields.splice(buttonsFieldIndex, 1);
+//     props.fields.push(buttonsFieldArr[0]);
+//   }
+// }
 const showExpandBtn = computed(() => {
-  let allColSpanNum = props.fields.reduce((total, item) => {
+  let allColSpanNum = filterFields.value.reduce((total, item) => {
     return total + item.colSpan;
   }, 0);
   return allColSpanNum > 24;
@@ -227,8 +236,8 @@ watch(showMore, (val) => {
 const firstLineItems = computed(() => {
   let init = 0;
   let arr = [];
-  for (let i = 0; i < props.fields.length; i++) {
-    let column = props.fields[i];
+  for (let i = 0; i < filterFields.value.length; i++) {
+    let column = filterFields.value[i];
     if (init + (column.colSpan || 0) > 24) {
       break;
     } else {
@@ -249,7 +258,7 @@ const firstLineItemsIsRight = computed(() => {
 });
 
 const otherLineItems = computed(() => {
-  return props.fields?.slice(cutIndex.value) || [];
+  return filterFields.value?.slice(cutIndex.value) || [];
 });
 const colToWidth = (colSpan) => {
   if (colSpan === 0) {

src/config/constants.js

@@ -248,3 +248,9 @@ export const SERVICE_RANGE = {
   1: '仅扫描',
   2: '扫描+阅卷',
 };
+
+export const DEVICE_USE_STATUS = {
+  1: '入库',
+  2: '中转',
+  3: '使用中',
+};

src/style/global.less

@@ -26,6 +26,7 @@ body {
   & > .t-link:not(:first-child) {
     margin-left: 15px;
   }
+  text-align: center;
 }
 
 .page-action {