inl-ui 0.0.74 → 0.0.76

package/src/pageComponent/views/pss/components/Info.tsx

@@ -23,10 +23,52 @@ import { CheckOutlined } from "@ant-design/icons-vue";
 
 import dayjs, { Dayjs } from "dayjs";
 
+import { getStatus } from "../utils";
+
 import pssApi from "@/api/pss";
 
 const Format = "YYYY-MM-DD HH:mm";
 
+const relevanceColumns = [
+  {
+    dataIndex: "supplyTypeName",
+    title: "申请类型",
+    width: 150,
+  },
+  {
+    dataIndex: "applyUserName",
+    title: "发起人",
+    width: 100,
+  },
+  {
+    key: "equipName",
+    title: "名称",
+    width: 200,
+  },
+  {
+    key: "runStatus",
+    title: "运行信号",
+    width: 100,
+  },
+  {
+    title: "回路数量",
+    key: "loopsNum",
+    width: 100,
+  },
+  {
+    title: "控制回路",
+    key: "loops",
+    width: 300,
+    ellipsis: true,
+  },
+  // {
+  //   title: "操作",
+  //   key: "operation",
+  //   fixed: "right",
+  //   width: 100,
+  // },
+];
+
 export default defineComponent({
   props: {
     detail: {
@@ -167,6 +209,23 @@ export default defineComponent({
       }
 
       getLockLoop();
+
+      getRelevanceList();
+    };
+
+    const relevanceList = ref<any>([]);
+    const getRelevanceList = () => {
+      const upList = dataObj.value.upstreamProcess.map((up) => {
+        up.relevanceType = "上游";
+        return up;
+      });
+
+      const downList = dataObj.value.downstreamProcess.map((down) => {
+        down.relevanceType = "下游";
+        return down;
+      });
+
+      relevanceList.value = [...upList, ...downList];
     };
 
     watch(
@@ -227,6 +286,8 @@ export default defineComponent({
       context.emit("update:showInfo", false);
     };
 
+    const activeKey = ref("1");
+
     return () => (
       <div class="pssInfo">
         <a-modal
@@ -321,8 +382,16 @@ export default defineComponent({
                       {dataObj.value?.attempt === "1" ? "有" : "无"}
                     </div>
                   </Col>
+
+                  <Col span={8}>
+                    <div class="label">运行信号:</div>
+                    <div class="value">
+                      {getStatus(dataObj.value?.runStatus)}
+                    </div>
+                  </Col>
                 </Row>
               </div>
+
               <div class="content_title" style="margin-top: 24px">
                 控制回路 ({dataObj.value?.loopVOs?.length})
               </div>
@@ -400,44 +469,109 @@ export default defineComponent({
                 </div>
               ))}
 
-              <div class="content_title">工单流程</div>
-              <div class="timeLine">
-                <Timeline>
-                  {dataObj.value?.process?.map((pro: any, index: number) => (
-                    <TimelineItem
-                      dot={
-                        dataObj.value?.process?.length - 1 === index ? (
-                          <div class="complate">
-                            <CheckOutlined />
-                          </div>
-                        ) : (
-                          <div class="active">
-                            <span></span>
-                          </div>
+              <a-tabs v-model={[activeKey.value, "activeKey"]} class="infoTabs">
+                <a-tab-pane key="1" tab="工单流程">
+                  <div class="timeLine">
+                    <Timeline>
+                      {dataObj.value?.process?.map(
+                        (pro: any, index: number) => (
+                          <TimelineItem
+                            dot={
+                              dataObj.value?.process?.length - 1 === index ? (
+                                <div class="complate">
+                                  <CheckOutlined />
+                                </div>
+                              ) : (
+                                <div class="active">
+                                  <span></span>
+                                </div>
+                              )
+                            }
+                          >
+                            <div class="content flex">
+                              <div
+                                class={[
+                                  "label",
+                                  dataObj.value?.process?.length - 1 === index
+                                    ? "timeLineActive"
+                                    : "",
+                                ]}
+                              >
+                                <div>{pro.activityName}</div>
+                                <div>{pro.assigneeName || "-"}</div>
+                                <div>{pro.comments}</div>
+                              </div>
+                              <div class="time">
+                                {pro.endTime &&
+                                  dayjs(pro.endTime).format(Format)}
+                              </div>
+                            </div>
+                          </TimelineItem>
                         )
-                      }
-                    >
-                      <div class="content flex">
-                        <div
-                          class={[
-                            "label",
-                            dataObj.value?.process?.length - 1 === index
-                              ? "timeLineActive"
-                              : "",
-                          ]}
-                        >
-                          <div>{pro.activityName}</div>
-                          <div>{pro.assigneeName || "-"}</div>
-                          <div>{pro.comments}</div>
-                        </div>
-                        <div class="time">
-                          {pro.endTime && dayjs(pro.endTime).format(Format)}
-                        </div>
-                      </div>
-                    </TimelineItem>
-                  ))}
-                </Timeline>
-              </div>
+                      )}
+                    </Timeline>
+                  </div>
+                </a-tab-pane>
+
+                <a-tab-pane key="2" tab="关联工单">
+                  <a-table
+                    dataSource={relevanceList.value}
+                    columns={relevanceColumns}
+                    pagination={false}
+                    rowKey="processInstanceId"
+                    v-slots={{
+                      bodyCell: ({ column, record, index }: any) => {
+                        // console.log(text, column, record, index);
+
+                        // 设备名称
+                        if (column.key === "equipName") {
+                          return `${record.equipName}（${record.relevanceType}）`;
+                        }
+                        // 运行信号
+                        if (column.key === "runStatus") {
+                          return getStatus(record.runStatus);
+                        }
+
+                        // 回路数量
+                        if (column.key === "loopsNum") {
+                          return <span>{record.loops.length}个</span>;
+                        }
+
+                        // 控制回路
+                        if (column.key === "loops") {
+                          const result = record.loops
+                            .map((loop: any) => {
+                              // return `${loop.id}-${loop.name}`;
+                              return loop.name;
+                            })
+                            .join("；");
+
+                          return <span>{result}</span>;
+                        }
+
+                        // 操作
+                        if (column.key === "operation") {
+                          return (
+                            <div class="operation">
+                              <a-button
+                                type="link"
+                                disabled
+                                onClick={() => {
+                                  // currentObj.value = record;
+                                  // operationState.showFooter = true;
+                                  // operationState.showInfo = true;
+                                }}
+                              >
+                                详情
+                              </a-button>
+                            </div>
+                          );
+                        }
+                      },
+                    }}
+                  ></a-table>
+                </a-tab-pane>
+              </a-tabs>
             </div>
           </div>
         </a-modal>

package/src/pageComponent/views/pss/components/NewOrder/SelectDevice.tsx

@@ -0,0 +1,408 @@
+import { defineComponent, reactive, ref, watch, nextTick } from "vue";
+import {
+  Button,
+  Table,
+  Modal,
+  Form,
+  FormItem,
+  Select,
+  Input,
+  Row,
+  Col,
+  message,
+} from "ant-design-vue";
+import { cloneDeep } from "lodash";
+
+import SelectRelevance from "./SelectRelevance";
+
+import { getStatus } from "../../utils";
+
+import pssApi from "@/api/pss";
+
+export default defineComponent({
+  props: {
+    showDevice: {
+      type: Boolean,
+      default: false,
+    },
+    selectedDeviceList: {
+      type: Array,
+      default: () => [],
+    },
+    currentRow: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 已选设备
+    oldDeviceList: {
+      type: Array,
+      default: () => [],
+    },
+    // 已选关联设备
+    oldRelevanceList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  emits: ["update:showDevice", "toUpdate"],
+
+  setup(props, context) {
+    watch(
+      () => props.showDevice,
+      (val) => {
+        if (val) {
+          searchDeviceList();
+          getCatalog();
+
+          selectedRow.selectedRows = props.oldDeviceList;
+          selectedRow.selectedRowKeys = props.oldDeviceList.map(
+            (device: any) => device.id
+          );
+
+          selectedRelevanceList.value = cloneDeep(props.oldRelevanceList);
+        }
+      }
+    );
+
+    const selectedRow: any = reactive({
+      selectedRowKeys: [],
+      selectedRows: [],
+    });
+
+    const onSelect = (selectedRowKeys: any[], selectedRows: any) => {
+      // console.log(selectedRowKeys, selectedRows);
+      selectedRow.selectedRowKeys = selectedRowKeys;
+      selectedRow.selectedRows = selectedRows;
+    };
+
+    const showRelevance = ref(false);
+    const currentRow = ref<any>();
+
+    const eqModal: any = reactive({
+      dataSource: [],
+      columns: [
+        {
+          dataIndex: "code",
+          title: "设备编码",
+          width: 100,
+        },
+        {
+          dataIndex: "name",
+          title: "设备名称",
+          ellipsis: true,
+        },
+        // {
+        //   dataIndex: "location",
+        //   title: "设备位置",
+        //   ellipsis: true,
+        // },
+        {
+          key: "runStatus",
+          title: "运行信号",
+          width: 100,
+        },
+        {
+          dataIndex: "loop",
+          title: "控制回路",
+          ellipsis: true,
+        },
+        {
+          key: "relevance",
+          title: "关联设备",
+          width: 80,
+        },
+      ],
+    });
+
+    const searchFormRef = ref();
+    const searchForm = reactive({
+      deviceName: "", // 设备名称
+      deviceCode: "", // 设备编码
+      deviceCatalogId: null, // 设备类型
+    });
+    const devicesLoading = ref(false);
+
+    // 查询设备
+    const searchDeviceList = async () => {
+      devicesLoading.value = true;
+      const res: any = await pssApi.getDeviceList(searchForm);
+      eqModal.dataSource = res.data.map((item: any) => {
+        item.loop = item.loops.join(",");
+        return item;
+      });
+      devicesLoading.value = false;
+    };
+
+    const catalogList: any = ref([]);
+
+    const getCatalog = async () => {
+      const { data } = await pssApi.getTree();
+      catalogList.value = data;
+    };
+
+    const ok = async () => {
+      if (selectedRow.selectedRows.length > 0) {
+        context.emit(
+          "toUpdate",
+          selectedRow.selectedRows,
+          selectedRelevanceList.value
+        );
+        cancelModal();
+      } else {
+        message.info("请选择设备");
+      }
+    };
+
+    const cancelModal = () => {
+      context.emit("update:showDevice", false);
+
+      searchFormRef.value.resetFields();
+      eqModal.dataSource = [];
+
+      selectedRow.selectedRowKeys = [];
+      selectedRow.selectedRows = [];
+
+      selectedRelevanceList.value = [];
+    };
+
+    const selectedRelevanceList: any = ref([]);
+    const toUpdateRelevance = (relevanceList) => {
+      selectedRelevanceList.value = relevanceList;
+    };
+
+    return () => (
+      <div class="SelectDevice">
+        <Modal
+          v-model={[props.showDevice, "visible"]}
+          title="添加设备"
+          width="1200px"
+          wrapClassName="newOrder_device_modal"
+          onCancel={cancelModal}
+          v-slots={{
+            footer: () => (
+              <div class="modal_footer">
+                <Button onClick={cancelModal}>取消</Button>
+                <Button type="primary" onClick={ok}>
+                  确定
+                </Button>
+              </div>
+            ),
+          }}
+        >
+          <div class="deviceModal_content flex" style="">
+            <div class="left flex flex1">
+              <Form
+                ref={searchFormRef}
+                model={searchForm}
+                labelCol={{ span: 8 }}
+                wrapperCol={{ span: 16 }}
+                labelAlign="right"
+                onSubmit={searchDeviceList}
+              >
+                <Row gutter={24}>
+                  <Col span={8}>
+                    <FormItem label="设备名称" name="deviceName">
+                      <a-input
+                        v-model={[searchForm.deviceName, "value"]}
+                        placeholder="请输入"
+                        allow-clear
+                      ></a-input>
+                    </FormItem>
+                  </Col>
+                  <Col span={8}>
+                    <FormItem label="设备编码" name="deviceCode">
+                      <a-input
+                        v-model={[searchForm.deviceCode, "value"]}
+                        placeholder="请输入"
+                        allow-clear
+                      ></a-input>
+                    </FormItem>
+                  </Col>
+                  <Col span={8} class="align-r">
+                    <a-space>
+                      <a-button type="primary" html-type="submit">
+                        查询
+                      </a-button>
+
+                      <a-button
+                        onClick={() => {
+                          searchFormRef.value.resetFields();
+                          searchDeviceList();
+                        }}
+                      >
+                        重置
+                      </a-button>
+                    </a-space>
+                  </Col>
+
+                  <a-col span={8}>
+                    <a-form-item label="设备类型" name="deviceCatalogId">
+                      <a-select
+                        v-model={[searchForm.deviceCatalogId, "value"]}
+                        allowClear
+                        placeholder="请选择"
+                        style="width: 100%"
+                      >
+                        {catalogList.value.map((item: any) => (
+                          <a-select-option value={item.code} key={item.code}>
+                            {item.name}
+                          </a-select-option>
+                        ))}
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                </Row>
+              </Form>
+
+              <div class="tableBox">
+                <Table
+                  pagination={false}
+                  columns={eqModal.columns}
+                  dataSource={eqModal.dataSource}
+                  // class="cus-table"
+                  rowKey="id"
+                  loading={devicesLoading.value}
+                  rowSelection={{
+                    onChange: onSelect,
+                    selectedRowKeys: selectedRow.selectedRowKeys,
+                    type: "radio",
+                    // getCheckboxProps: (record: any) => {
+                    //   const oldDeviceIdList = formState.value.deviceList.map(
+                    //     (device: any) => device.id
+                    //   );
+
+                    //   return {
+                    //     disabled: oldDeviceIdList.includes(record.id),
+                    //     name: record.name,
+                    //   };
+                    // },
+                  }}
+                  v-slots={{
+                    bodyCell: ({ column, record, index }: any) => {
+                      // console.log(text, column, record, index);
+
+                      // 运行信号
+                      if (column.key === "runStatus") {
+                        return getStatus(record.runStatus);
+                      }
+
+                      // 关联设备
+                      if (column.key === "relevance") {
+                        return (
+                          <a-button
+                            type="link"
+                            disabled={
+                              !selectedRow.selectedRowKeys.includes(record.id)
+                            }
+                            onClick={() => {
+                              currentRow.value = null;
+
+                              nextTick(() => {
+                                currentRow.value = record;
+                                showRelevance.value = true;
+                              });
+                            }}
+                          >
+                            选择
+                          </a-button>
+                        );
+                      }
+                    },
+                  }}
+                ></Table>
+              </div>
+            </div>
+
+            <div class="right flex">
+              <div class="top flex-center">
+                <div>
+                  已选
+                  {selectedRow.selectedRows.length +
+                    selectedRelevanceList.value.length}
+                  台设备
+                </div>
+                <a-button
+                  type="link"
+                  onClick={() => {
+                    selectedRow.selectedRowKeys = [];
+                    selectedRow.selectedRows = [];
+
+                    selectedRelevanceList.value = [];
+                  }}
+                >
+                  清空
+                </a-button>
+              </div>
+
+              <div class="activedBox">
+                {selectedRow.selectedRows.map((selected: any, idx: number) => {
+                  // const name = `${selected.code}${selected.name}`;
+                  const name = selected.name;
+                  const textLength = 10;
+                  const title = name.length > textLength ? name : "";
+                  return (
+                    <a-tag
+                      class="tag"
+                      title={title}
+                      key={selected.id}
+                      closable
+                      onClose={() => {
+                        const index = selectedRow.selectedRows.findIndex(
+                          (item: any) => item.id === selected.id
+                        );
+                        selectedRow.selectedRowKeys.splice(index, 1);
+                        selectedRow.selectedRows.splice(idx, 1);
+
+                        selectedRelevanceList.value = [];
+                      }}
+                    >
+                      {name.length > textLength
+                        ? `${name.slice(0, textLength)}...`
+                        : name}
+                    </a-tag>
+                  );
+                })}
+              </div>
+
+              <div class="top flex-center">关联设备</div>
+              <div class="activedBox">
+                {selectedRelevanceList.value.map(
+                  (relevance: any, idx: number) => {
+                    const name = `${relevance.name}（${relevance.relevanceType}）`;
+                    const textLength = 10;
+                    const title = name.length > textLength ? name : "";
+                    return (
+                      <a-tag
+                        class="tag"
+                        title={title}
+                        key={relevance.id}
+                        closable
+                        onClose={() => {
+                          selectedRelevanceList.value.splice(idx, 1);
+                        }}
+                      >
+                        {name.length > textLength
+                          ? `${name.slice(0, textLength)}...`
+                          : name}
+                      </a-tag>
+                    );
+                  }
+                )}
+              </div>
+            </div>
+          </div>
+        </Modal>
+
+        <SelectRelevance
+          v-model={[showRelevance.value, "showRelevance"]}
+          currentRow={currentRow.value}
+          selectedRelevanceList={selectedRelevanceList.value}
+          onToUpdate={(relevanceList) => {
+            toUpdateRelevance(relevanceList);
+          }}
+        />
+      </div>
+    );
+  },
+});