处理字典多条回显

src/components/DictTag/index.vue

@@ -4,11 +4,12 @@
       <template v-if="values.includes(item.value)">
         <!-- && (item.elTagClass == '' || item.elTagClass == null) -->
         <span
-          v-if="(item.elTagType == 'default' || item.elTagType == '') "
+          v-if="item.elTagType == 'default' || item.elTagType == ''"
           :key="item.value"
           :index="index"
           :class="item.elTagClass"
-        >{{ item.label + " " }}</span>
+          >{{ filterseparator(item.label, index) }}
+        </span>
         <el-tag
           v-else
           :disable-transitions="true"
@@ -16,18 +17,20 @@
           :index="index"
           :type="item.elTagType"
           :class="item.elTagClass"
-        >{{ item.label + " " }}</el-tag>
+          >{{ item.label + " " }}</el-tag
+        >
       </template>
     </template>
     <template v-if="unmatch && showValue">
       {{ unmatchArray | handleArray }}
     </template>
+    <template v-if="value !==0 && !value ">暂无</template>
   </div>
 </template>
 
 <script setup>
 // 记录未匹配的项
-const unmatchArray = ref([])
+const unmatchArray = ref([]);
 
 const props = defineProps({
   // 数据
@@ -45,34 +48,61 @@ const props = defineProps({
   separator: {
     type: String,
     default: ",",
+  },
+});
+
+const filterseparator = (label, index) => {
+  if (typeof props.value == "string" && props.value.includes(",")) {
+    if (index == values.value.length) {
+      return label;
+    }
+    return label + props.separator;
+  } else {
+    return label;
   }
-})
+};
 
 const values = computed(() => {
-  if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
-  return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)
-})
+  if (
+    props.value === null ||
+    typeof props.value === "undefined" ||
+    props.value === ""
+  )
+    return [];
+  return Array.isArray(props.value)
+    ? props.value.map((item) => "" + item)
+    : String(props.value).split(props.separator);
+});
 
 const unmatch = computed(() => {
-  unmatchArray.value = []
+  unmatchArray.value = [];
   // 没有value不显示
-  if (props.value === null || typeof props.value === 'undefined' || props.value === '' || !Array.isArray(props.options) || props.options.length === 0) return false
+  if (
+    props.value === null ||
+    typeof props.value === "undefined" ||
+    props.value === "" ||
+    !Array.isArray(props.options) ||
+    props.options.length === 0
+  ) {
+    return false;
+  }
+
   // 传入值为数组
-  let unmatch = false // 添加一个标志来判断是否有未匹配项
-  values.value.forEach(item => {
-    if (!props.options.some(v => v.value === item)) {
-      unmatchArray.value.push(item)
-      unmatch = true // 如果有未匹配项，将标志设置为true
+  let unmatch = false; // 添加一个标志来判断是否有未匹配项
+  values.value.forEach((item) => {
+    if (!props.options.some((v) => v.value === item)) {
+      unmatchArray.value.push(item);
+      unmatch = true; // 如果有未匹配项，将标志设置为true
     }
-  })
-  return unmatch // 返回标志的值
-})
+  });
+  return unmatch; // 返回标志的值
+});
 
 function handleArray(array) {
-  if (array.length === 0) return ""
+  if (array.length === 0) return "";
   return array.reduce((pre, cur) => {
-    return pre + " " + cur
-  })
+    return pre + " " + cur;
+  });
 }
 </script>
 
@@ -81,10 +111,9 @@ function handleArray(array) {
   margin-left: 10px;
 }
 .el-tag {
-
-font-size: 14px;
-/* color: #FFFFFF; */
-padding:0 12px;
-font-weight: 500;
+  font-size: 14px;
+  /* color: #FFFFFF; */
+  padding: 0 12px;
+  font-weight: 500;
 }
 </style>

src/views/emergency/workOrder/index.vue

@@ -8,10 +8,12 @@
         label-width="68px"
         class="search-form"
       >
-        <el-form-item label="处置部门" prop="address">
-          <el-input
-            v-model="queryParams.address"
-            placeholder="请输入"
+        <el-form-item label="处置部门" prop="parentId">
+          <el-cascader
+            v-model="parentIdList"
+            :options="detpList"
+            :props="cascaderProps"
+            @change="parentIdChange"
             clearable
           />
         </el-form-item>
@@ -29,11 +31,14 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="影响类型" prop="gdLevel">
+        <el-form-item label="影响类型" prop="yxlx">
           <el-select
-            v-model="queryParams.gdLevel"
+            v-model="yxlxList"
             placeholder="请选择"
             clearable
+            multiple
+            collapse-tags
+            @change="multipleChange"
           >
             <el-option
               v-for="dict in yxlx"
@@ -57,7 +62,7 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="录入时间" prop="userName">
+        <el-form-item label="录入时间">
           <el-date-picker
             v-model="datePicker"
             type="datetimerange"
@@ -108,6 +113,7 @@
           prop="address"
           show-overflow-tooltip
         />
+
         <el-table-column
           label="工单类型"
           align="center"
@@ -119,6 +125,17 @@
           </template>
         </el-table-column>
 
+        <el-table-column
+          label="影响类型 "
+          align="center"
+          key="yxlx"
+          prop="yxlx"
+        >
+          <template #default="scope">
+            <dict-tag :options="yxlx" :value="scope.row.yxlx" />
+          </template>
+        </el-table-column>
+
         <el-table-column
           label="录入时间"
           align="center"
@@ -147,31 +164,6 @@
         >
           <template #default="scope">
             <div class="table-operation-row">
-              <!-- <section v-show="scope.row.status == 0">
-                <el-button
-                  link
-                  type="primary"
-                  icon="FolderAdd"
-                  @click="handlerEdit(scope.row, 1)"
-                  >勘察录入</el-button
-                >
-                <el-button
-                  link
-                  type="primary"
-                  icon="FolderRemove"
-                  @click="handlerRetreat(scope.row)"
-                  >退单</el-button
-                >
-              </section> -->
-              <!-- <section v-show="scope.row.status == 1">
-                <el-button
-                  link
-                  type="primary"
-                  icon="Edit"
-                  @click="handlerEdit(scope.row)"
-                  >编辑</el-button
-                >
-              </section> -->
               <section v-show="scope.row.status == 0">
                 <el-button
                   link
@@ -226,23 +218,21 @@
         gdlx,
         deptList,
         yxlx,
-        xdsqm
+        xdsqm,
       }"
       v-model="open"
       :id="workId"
       :title="title"
       @confirm="getList()"
     ></operation>
- 
+
     <!-- 派发 -->
     <distriBute
       :id="workId"
-     
       v-model="distributeView"
       :deptList="deptList"
       @confirm="getList()"
     ></distriBute>
-
   </tablePage>
 </template>
 
@@ -255,12 +245,20 @@ import useUserStore from "@/store/modules/user";
 const { proxy } = getCurrentInstance();
 const userStore = useUserStore();
 const deptList = ref([]);
-const { gdlx, gd_status, yxlx,xdsqm } = proxy.useDict(
+const { gdlx, gd_status, yxlx, xdsqm } = proxy.useDict(
   "gdlx",
   "gd_status",
-  "yxlx","xdsqm"
+  "yxlx",
+  "xdsqm"
 );
+const yxlxList = ref([]);
+const parentIdList = ref([]);
 const datePicker = ref([]);
+const detpList = ref([]);
+const cascaderProps = {
+  value: "deptId",
+  label: "deptName",
+};
 const workId = ref(null);
 const loading = ref(false);
 const list = ref([]);
@@ -268,16 +266,15 @@ const open = ref(false);
 
 const distributeView = ref(false);
 
-
 const title = ref("");
 const total = ref(0);
 const router = useRouter();
 const data = reactive({
   form: {},
   queryParams: {
-    address: undefined,
+    parentId: undefined,
     gdType: undefined,
-    gdLevel: undefined,
+    yxlx: undefined,
     status: undefined,
     begainTime: undefined,
     endTime: undefined,
@@ -292,13 +289,39 @@ const { queryParams, form, rules } = toRefs(data);
 onMounted(() => {
   getList();
   getDeptTree();
+  getDeptTree(0);
 });
 
+
+const parentIdChange = (e)=>{
+
+  if(e && e.length>0){
+    queryParams.value.parentId = e[e.length -1];
+  }else{
+    queryParams.value.parentId = undefined
+  }
+}
+
+/**
+ * 影响类型
+ * @param e
+ */
+const multipleChange = (e) => {
+  if (e && e.length > 0) {
+    queryParams.value.yxlx = e.toString();
+  }else{
+    queryParams.value.yxlx = undefined
+  }
+};
+
 // 日期变换
 const changeDatepicker = (e) => {
   if (e) {
     queryParams.value.begainTime = e[0];
     queryParams.value.endTime = e[1];
+  }else{
+    queryParams.value.begainTime = undefined;
+    queryParams.value.endTime = undefined;
   }
 };
 
@@ -316,11 +339,16 @@ const getList = async () => {
 /**
  * 获取系统组织架构
  */
-const getDeptTree = async () => {
+const getDeptTree = async (isParent) => {
   const res = await getDetListById({
     deptId: userStore.deptId,
+    isParent: isParent,
   });
-  deptList.value = res;
+  if (isParent === 0) {
+    detpList.value = res;
+  } else {
+    deptList.value = res;
+  }
 };
 
 /**
@@ -337,13 +365,15 @@ const handleQuery = () => {
 const resetQuery = () => {
   proxy.resetForm("queryRef");
   datePicker.value = [];
+  yxlxList.value = [];
+  parentIdList.value = [];
+  queryParams.value.yxlx = undefined;
 
   queryParams.value.begainTime = undefined;
   queryParams.value.endTime = undefined;
   handleQuery();
 };
 
-
 /**
  * 派发
  */
@@ -352,8 +382,6 @@ const handlerDistriBute = (row, text) => {
   distributeView.value = true;
 };
 
-
-
 /**
  *
  * 勘察录入
@@ -361,7 +389,7 @@ const handlerDistriBute = (row, text) => {
  */
 const handlerEdit = (row) => {
   workId.value = row.id;
-  title.value = "工单处理反馈" ;
+  title.value = "工单处理反馈";
   open.value = true;
 };
 

src/views/emergency/workOrder/info.vue

@@ -19,8 +19,8 @@
         <div class="form-item">
           <div class="form-label">影响类型</div>
           <div class="form-value">
-            <dict-tag :options="yxlx" :value="form.yxlx" v-if="form.yxlx" />
-            <span v-else>暂无</span>
+            <dict-tag :options="yxlx" :value="form.yxlx"  />
+          
           </div>
         </div>