add 添加并引用状态组件

src/components/StateSelect.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="state-select">
+    <select name="state" id="state" @change.stop.prevent="handleChange" :key="selectKey" style="color: #606266;">
+      <option v-for="(opt, index) in options" :key="index" :value="opt.value" :selected="chosen === opt.value">
+        {{ opt.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+import { getDictDataList } from "@/utils";
+
+export default {
+  name: "StateSelect",
+  props: {
+    injectData: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  data() {
+    const d = getDictDataList("car_state");
+    const chosen = this.injectData.stateDictValue;
+    return {
+      options: d.map((o) => ({
+        value: o.dictValue,
+        label: o.dictLabel,
+      })),
+      chosen,
+      selectKey: 0,
+    };
+  },
+  methods: {
+    handleChange(e) {
+      const old = this.chosen;
+      const value = e.target.value;
+
+      const { id } = this.injectData;
+
+      this.$confirm("确定更改窑车状态?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return this.$http
+            .post("/pms/carHandle/change", {
+              id,
+              stateDictValue: value,
+            })
+            .then(({ data: res }) => {
+              if (res.code === 0) {
+                this.chosen = value;
+                this.$nextTick(() => {
+                  this.selectKey = Math.random();
+                });
+                this.$message({
+                  message: "更新成功",
+                  duration: 1500,
+                  type: "success",
+                });
+              } else {
+                this.$message({
+                  message: "更新失败",
+                  duration: 1500,
+                  type: "error",
+                });
+                throw new Error();
+              }
+            });
+        })
+        .catch(() => {
+          this.chosen = old;
+          this.$nextTick(() => {
+            this.selectKey = Math.random();
+          });
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.state-select >>> #state {
+  width: 100%;
+  /* appearance: unset;  */
+  border: none;
+}
+</style>