字典

src/components/a-dict/ADict.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import DictApi from '@/pages/sys/dict/dict-api.ts'
+import Utils from '@/common/utils'
+
+const props = defineProps<{
+  dictKey: string
+}>()
+
+const loading = ref(false)
+
+const dictItems = Utils.resetAble(reactive<DictItemTypes.SearchDictItemResult[]>([]))
+
+function loadData(txt?: string) {
+  loading.value = true
+  DictApi.obtainDictData({dictKey: props.dictKey, txt})
+    .then(res => {
+      dictItems.$reset(res.data)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+onMounted(loadData)
+
+defineExpose({
+  loadData,
+})
+
+</script>
+
+<template>
+  <ElSelect :loading="loading" :remote-method="loadData" filterable remote remote-show-suffix reserve-keyword v-bind="$attrs">
+    <ElOption v-for="item in dictItems"
+      :key="item.id"
+      :label="item.txt" :value="item.val"/>
+  </ElSelect>
+</template>
+
+<style lang="stylus" scoped>
+
+</style>

src/pages/gds/goods/GoodsForm.vue

@@ -20,24 +20,9 @@
         <Uploader v-model:file="formData.picture" :limit="1" :multiple="true" accept="image/*" class="avatar-uploader" list-type="picture-card">
           <span style="font-size: 50px; padding: 0 40px">+</span>
         </Uploader>
-        <!-- <ElInput v-model="formData.picture" :disabled="status === 'view'" placeholder="图片" /> -->
       </ElFormItem>
       <ElFormItem label="计量单位" prop="unit">
-        <!-- <ElInput v-model="formData.unit" :disabled="status === 'view'" placeholder="计量单位" /> -->
+        <ADict v-model="formData.unit" :disabled="status === 'view'" dict-key="unit" placeholder="计量单位" style="width: 240px"/>
-
-        <el-select v-model="formData.unit" :disabled="status === 'view'" placeholder="产品类型"  filterable remote reserve-keyword remote-show-suffix :remote-method="remoteMethod" :loading="loading" style="width: 240px">
-          <el-option v-for="item in unitList" :key="item.id" :label="item.txt" :value="item.val" />
-        </el-select>
-
-      </ElFormItem>
-      <ElFormItem label="是否为成品" prop="fg">
-        <el-switch v-model="formData.fg" />
-      </ElFormItem>
-      <ElFormItem label="是否为半成品" prop="sfg">
-        <el-switch v-model="formData.sfg" />
-      </ElFormItem>
-      <ElFormItem label="是否为原料" prop="rg">
-        <el-switch v-model="formData.rg" />
       </ElFormItem>
       <ElFormItem label="排序" prop="sort">
         <ElInput v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序" />
@@ -57,14 +42,19 @@
 </template>
 
 <script lang="ts" setup>
-import GoodsApi from "@/pages/gds/goods/goods-api.ts";
+import GoodsApi from '@/pages/gds/goods/goods-api.ts'
-import Strings from "@/common/utils/strings.ts";
+import Strings from '@/common/utils/strings.ts'
-import FormUtil from "@/common/utils/formUtil.ts";
+import FormUtil from '@/common/utils/formUtil.ts'
-import Utils from "@/common/utils";
+import Utils from '@/common/utils'
-import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import {
-import Uploader from "@/components/uploader/Uploader.vue";
+  ElMessage,
-import GoodsCategoryApi from "@/pages/gds/goods-category/goods-category-api.ts";
+  type FormInstance,
-import DictApi from "@/pages/sys/dict/dict-api.ts";
+  type FormRules,
+} from 'element-plus'
+import Uploader from '@/components/uploader/Uploader.vue'
+import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
+import DictApi from '@/pages/sys/dict/dict-api.ts'
+import ADict from '@/components/a-dict/ADict.vue'
 
 const emits = defineEmits(["editSucc"]);
 const showDialog = ref(false);
@@ -82,9 +72,6 @@ const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
   specParams: [{ required: true, message: "请填写规格", trigger: "blur" }],
   picture: [{ required: true, message: "请填写图片", trigger: "blur" }],
   unit: [{ required: true, message: "请填写计量单位", trigger: "blur" }],
-  fg: [{ required: true, message: "请填写是否为成品", trigger: "blur" }],
-  sfg: [{ required: true, message: "请填写是否为半成品", trigger: "blur" }],
-  rg: [{ required: true, message: "请填写是否为原料", trigger: "blur" }],
   sort: [{ required: true, message: "请填写排序", trigger: "blur" }],
 });