优化代码

src/option/aftersales/vueTvemp.js

@@ -155,7 +155,7 @@ export const columnList = [
   {
     prop: 'processedBy',
     label: '工单处理方',
-    type: 1,
+    type: 2,
     values: '',
     width: '150',
     checkarr: [],

src/views/aftersales/aftersalesWorkOrderTemp.vue

@@ -5,13 +5,30 @@
       <!-- 搜索模块 -->
       <div v-h5uShow="search">
         <!-- 查询模块 -->
-        <el-form :inline="true" :model="query" class="el-fr-d">
-          <!-- 查询按钮 -->
-          <el-form-item class="el-btn">
-            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
-            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
+        <el-form :inline="true" :model="TopQuery" class="el-fr-d">
+          <el-form-item label="工单号" class="el-times">
+            <div class="el_div_input">
+              <el-input
+                type="text"
+                clearable
+                v-model="TopQuery.workOrderNumber"
+                placeholder="请输入工单号"
+              /><el-icon @click="MultilineSearch('工单号搜索', TopQuery.workOrderNumber)"
+                ><CirclePlusFilled
+              /></el-icon>
+            </div>
+          </el-form-item>
+          <el-form-item label="订单自编号" class="el-times">
+            <div class="el_div_input">
+              <el-input
+                clearable
+                type="text"
+                v-model="TopQuery.orderCode"
+                placeholder="请输入订单自编号"
+              /><el-icon @click="MultilineSearch('订单自编号搜索')"><CirclePlusFilled /></el-icon>
+            </div>
           </el-form-item>
-          <el-form-item label="配送日期">
+          <!-- <el-form-item label="配送日期">
             <el-date-picker
               v-model="TopQuery.time"
               type="datetimerange"
@@ -22,6 +39,11 @@
               :shortcuts="shortcuts"
               :default-time="defaultTime2"
             />
+          </el-form-item> -->
+          <!-- 查询按钮 -->
+          <el-form-item class="el-btn">
+            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
+            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -330,6 +352,53 @@
         </span>
       </template>
     </el-dialog>
+
+    <!-- 搜索弹窗 -->
+    <div class="Searchboxpop-upwindow">
+      <el-dialog
+        v-model="Searchboxpop.dialogSearch"
+        :title="Searchboxpop.SearchboxpopUpwindowtitle"
+        :show-close="false"
+        :fullscreen="Searchboxpop.fullscreen"
+        :close-on-click-modal="false"
+        :draggable="true"
+        :overflow="false"
+        width="50%"
+      >
+        <template #header>
+          <div class="title">
+            <span>{{ Searchboxpop.SearchboxpopUpwindowtitle }}</span>
+          </div>
+          <div class="div_icon">
+            <el-icon @click="minimize"><Minus /></el-icon>
+            <el-icon @click="maximize"><FullScreen /></el-icon>
+            <el-icon @click="close"><CloseBold /></el-icon>
+          </div>
+        </template>
+        <el-input
+          v-model="TopQuery.inputAll"
+          style="width: 100%; height: 100%"
+          :autosize="{ minRows: 24 }"
+          type="textarea"
+          placeholder="每一行算一个搜索单位“多个请【换行】输入"
+        />
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button type="primary" @click="dialogSearchSubmit"> 确认 </el-button>
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+    <!-- 最小化窗口 -->
+    <div class="minimize_windows" v-if="Searchboxpop.MinimizeState">
+      <div class="title">
+        <span>{{ Searchboxpop.SearchboxpopUpwindowtitle }}</span>
+      </div>
+      <div class="div_icon">
+        <el-icon @click="ExpandWindow"><FullScreen /></el-icon>
+        <el-icon @click="DestroyWindow"><Close /></el-icon>
+      </div>
+    </div>
   </basic-container>
   <!-- 列表配置显示 -->
 
@@ -443,6 +512,14 @@ const PageLoading = ref(false); //页面loading
 const warehouseData = ref([]); //仓库信息
 const UserInfo = ref({}); //登陆人信息
 const assignFromForm = ref(null); //指派客服表单实例
+const dialogSearch = ref(false); //弹窗搜索
+// 多行搜索
+const Searchboxpop = ref({
+  SearchboxpopUpwindowtitle: '', //标题
+  dialogSearch: false, ///弹窗是否展开
+  fullscreen: false, //是否全屏
+  MinimizeState: false, //是否最小化
+});
 const assignFrom = ref({
   dialogassign: false,
   AssignLoad: false,
@@ -973,7 +1050,6 @@ const searchChange = () => {
 
 // 刷新按钮
 const searchChangeS = () => {
-  details.search = false; //关闭搜索
   updateMenuAndData(); //获取最新数据
 };
 // 重置表格搜索
@@ -987,7 +1063,32 @@ const ResetTableSearch = async () => {
   PublicDataRequest(TabPermissions.value, true);
 };
 //清空
-const searchReset = () => {};
+const searchReset = () => {
+  TopQuery.value={}
+  TabList.value.forEach(item => {
+    item.query = {};
+  });
+  const TabcolumnList = [
+    columnList,
+    columnList1,
+    columnList2,
+    columnList3,
+    columnList4,
+    columnList5,
+    columnList6,
+    columnList7,
+    columnList8,
+    columnList9,
+    columnList10,
+  ];
+
+  TabcolumnList.forEach(item => {
+    handleClearTableQuery(item);
+  });
+  details.search = false; // 关闭搜索
+  updateMenuAndData(); //获取最新数据
+  autoscaling();
+};
 // 顶部搜索
 const searchHide = () => {
   console.log(details);
@@ -2155,6 +2256,77 @@ const Assignbutton = async () => {
     }
   });
 };
+/**
+ * 弹窗多行搜索
+ * 1.获取当前选中的客户信息
+ * 2.然后根据客户信息,去后台查询对应的客服信息
+ * 3.将查询到的客服信息显示在弹窗中
+ * 4.然后用户可以选择对应的客服
+ * 5.最终将选择的客服信息,分配给对应的工单
+ */
+const MultilineSearch = (title, input) => {
+  if (input) {
+    const formattedInput = input.split(',').join('\n');
+    TopQuery.value.inputAll = formattedInput; // 赋值给 inputAll
+  } else {
+    TopQuery.value.inputAll = '';
+  }
+
+  Searchboxpop.value.SearchboxpopUpwindowtitle = title; // 设置标题
+
+  Searchboxpop.value.dialogSearch = true; // 打开对话框
+};
+/**
+ * @description  dialogSearchSubmit
+ * 1.获取用户输入的所有数据
+ * 2.将其拆分成每一行
+ * 3.然后将每一行的前后空格去除
+ * 4.然后将所有的行连接起来
+ * 5.将连接起来的数据重新赋值给workOrderNumber
+ * @param {void} 无参数
+ * @return {void} 无返回值
+ */
+const dialogSearchSubmit = () => {
+  // 1.获取用户输入的所有数据
+  const inputAll = TopQuery.value.inputAll;
+
+  // 2.将其拆分成每一行
+  const lines = inputAll
+    .split('\n') // 按换行分割
+    .map(line => line.trim()) // 移除每一行前后的空格
+    .filter(line => line !== ''); // 过滤掉空行
+
+  // 3.然后将每一行的前后空格去除
+
+  // 4.然后将所有的行连接起来
+  const joinedLines = lines.join(','); // 使用逗号连接，无空格
+
+  // 5.将连接起来的数据重新赋值给workOrderNumber
+  TopQuery.value.workOrderNumber = joinedLines;
+  Searchboxpop.value.dialogSearch = false; //关闭弹窗
+};
+// 关闭
+const close = () => {
+  Searchboxpop.value.dialogSearch = false; //关闭弹窗
+  Searchboxpop.value.MinimizeState = false; //销毁最小化
+};
+// 最大化
+const maximize = () => {
+  Searchboxpop.value.fullscreen = !Searchboxpop.value.fullscreen; //最大化
+};
+
+// 最小化
+const minimize = () => {
+  Searchboxpop.value.dialogSearch = false; //关闭弹窗
+  Searchboxpop.value.MinimizeState = true; //最小化
+};
+const ExpandWindow = () => {
+  Searchboxpop.value.dialogSearch = true; //回复窗口弹窗
+  Searchboxpop.value.MinimizeState = false; //销毁最小化
+};
+const DestroyWindow = () => {
+  Searchboxpop.value.MinimizeState = false; //销毁最小化
+};
 </script>
 
 <style scoped lang="scss">
@@ -2227,4 +2399,95 @@ const Assignbutton = async () => {
     justify-content: flex-end;
   }
 }
+:deep(.el-fr-d) {
+  display: flex;
+  .el-form-item {
+    width: 20%;
+  }
+  .el_div_input {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .el-icon {
+      font-size: 2em;
+    }
+  }
+  .el-form-item {
+    margin: 0;
+    margin: 10px 6px;
+  }
+}
+:deep(.Searchboxpop-upwindow) {
+  .el-overlay {
+    position: absolute;
+    .el-dialog {
+      min-height: 70%;
+    }
+    .el-overlay-dialog {
+      position: absolute;
+    }
+    .el-dialog__header {
+      display: flex;
+      justify-content: space-between;
+      .title {
+        position: relative;
+        padding: 0 10px;
+      }
+      .title::after {
+        content: '*';
+        color: #172e60;
+        position: absolute;
+        font-size: 20px;
+        top: 0;
+        left: 0;
+      }
+      .div_icon {
+        width: 100px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 19px;
+        cursor: pointer;
+      }
+    }
+    .el-dialog__footer {
+      display: flex;
+      justify-content: center;
+      padding: 6px;
+      .el-button {
+        width: 160px;
+        height: 35px;
+      }
+    }
+  }
+}
+.minimize_windows {
+  width: 200px;
+  height: 49px;
+  border: 1px solid #cccccc82;
+  position: absolute;
+  bottom: 1px;
+  left: 10px;
+  box-shadow: 2px -1px 0.15625vw #c1c1c187;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .title {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    span {
+      font-size: 16px;
+    }
+  }
+  span {
+    font-size: 14px;
+  }
+  .div_icon {
+    display: flex;
+    align-items: center;
+    width: 54px;
+    justify-content: space-between;
+    font-size: 20px;
+  }
+}
 </style>