新增客户管理页面

src/views/sto/main/customer.vue

 <template>
   <div>
-    <SearchBox ref="SearchBoxRef" formName="selectTop" :formData="query" @showPop="showPop" @reset="reset"></SearchBox>
-    <ButtonBox @search="handleSearch" @add="insertDialog" @start="start('0')" @remove="shutdwon('1')"></ButtonBox>
+    <el-card :body-style="cardBodyStyle">
+      <el-form :model="query" label-width="auto" label-position="right">
+        <el-row :gutter="10">
+          <el-col :span="5">
+            <el-form-item label="客户名称" style="margin-bottom: 0px;" >
+              <el-input v-model="query.customerNm" clearable placeholder="请输入客户名称" style="width:100%;"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-form-item label="" style="margin-bottom: 0px; margin-top: 5px;">
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+              <el-button type="success" @click="insertDialog">新增</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <ButtonBox @search="handleSearch" @add="insertDialog"></ButtonBox>
     <el-card :body-style="cardBodyStyle">
       <el-table :data="tableData" border highlight-current-row   @selection-change="handleSelectionChange" :height="height"  >
         <el-table-column type="selection" fixed></el-table-column>
             <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
           </template>
         </el-table-column>
-        <el-table-column v-if="true" prop="storeCd" label="库房编码" width="150" header-align="center"
+        <el-table-column v-if="true" prop="customerNm" label="客户名称" width="150" header-align="center"
                          align="center" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column v-if="true" prop="storeNm" label="库房名称" width="150" header-align="center"
+        <el-table-column v-if="true" prop="customerShortNm" label="客户简称" width="150" header-align="center"
                          align="center" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column v-if="true" prop="areaCd" label="区号" width="150" header-align="center"
+        <el-table-column v-if="true" prop="contactPerson" label="联系人" width="150" header-align="center"
                          align="center" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column v-if="true" prop="stackCd" label="垛位号" width="150" header-align="center"
+        <el-table-column v-if="true" prop="contactInfo" label="联系方式" width="150" header-align="center"
                          align="center" show-overflow-tooltip>
         </el-table-column>
-        <el-table-column v-if="true" prop="storeType" label="库房类型" width="150" header-align="center" :formatter="formatter"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="activeStatus" label="生效状态" width="150" header-align="center"
-                         align="center" show-overflow-tooltip>
-          <template #default="scope">
-            <el-tag type="success" v-if="scope.row.activeStatus == 0">{{ formatterStr( "status",scope.row.activeStatus) }}</el-tag>
-            <el-tag type="info" v-else-if="scope.row.activeStatus == 1">{{ formatterStr( "status",scope.row.activeStatus) }}</el-tag>
-            <el-tag  v-else>{{ formatterStr( "status",scope.row.activeStatus) }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column v-if="true" prop="addName" label="添加人" width="150" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="addTime" label="添加时间" width="200" header-align="center"
-                         align="center" show-overflow-tooltip>
-        </el-table-column>
-        <el-table-column v-if="true" prop="remarks" label="备注"  header-align="center"
+        <el-table-column v-if="true" prop="defaultAddress" label="默认地址" header-align="center"
                          align="center" show-overflow-tooltip>
         </el-table-column>
         <el-table-column label="操作" header-align="center" align="center" width="200px" fixed="right">
       <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
         <el-row>
           <el-col :span="12">
-            <el-form-item label="库房类型" prop="storeType">
-              <SelectorComponent  :optionList="dictList.STORE_TYPE" :value="form.storeType"
-                                 @change="storeTypeDict"/>
+            <el-form-item label="客户名称" prop="customerNm">
+              <el-input v-model="form.customerNm" maxlength="100" placeholder="请输入客户名称"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="库房名称" prop="storeNm">
-              <el-autocomplete
-                  v-model="form.storeNm"
-                  :fetch-suggestions="querySearchSignReqNm"
-                  placeholder="请输入库房名称"
-                  @change="querySearchSignReqNmChange"
-                  clearable
-
-                  @select="handleBlur"
-              ></el-autocomplete>
+            <el-form-item label="客户简称" prop="customerShortNm">
+              <el-input v-model="form.customerShortNm" maxlength="100"  placeholder="请输入客户简称"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="区号" prop="areaCd">
-              <el-autocomplete
-                  v-model="form.areaCd"
-                  :fetch-suggestions="querySearChareaCd"
-                  placeholder="请输入区号"
-                  @change="querySearChareaCdChange"
-                  clearable
-
-                  @select="handleBlurQh"
-              ></el-autocomplete>
+            <el-form-item label="联系人" prop="contactPerson">
+              <el-input v-model="form.contactPerson"  maxlength="50" placeholder="请输入联系人"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="垛位号" prop="stackCd">
-              <el-input v-model="form.stackCd"></el-input>
+            <el-form-item label="联系方式" prop="contactInfo">
+              <el-input v-model="form.contactInfo" maxlength="50" placeholder="请输入联系方式"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="备注">
+            <el-form-item label="默认地址" prop="defaultAddress">
               <el-input
-                  v-model="form.remarks"
+                  v-model="form.defaultAddress"
                   :autosize="{ minRows: 2, maxRows: 4 }"
                   type="textarea"
-                  placeholder=""
+                  placeholder="请输入默认地址"
+                  maxlength="2"
+                  show-word-limit
               />
             </el-form-item>
           </el-col>
       <el-form :model="form" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="rules">
         <el-row>
           <el-col :span="12">
-            <el-form-item label="库房类型" prop="storeType">
-              <SelectorComponent  :optionList="dictList.STORE_TYPE" :value="form.storeType"
-                                 @change="storeTypeDict"/>
+            <el-form-item label="客户名称" prop="customerNm">
+              <el-input v-model="form.customerNm" placeholder="请输入客户名称"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="库房名称" prop="storeNm">
-              <el-autocomplete
-                  v-model="form.storeNm"
-                  :fetch-suggestions="querySearchSignReqNm"
-                  placeholder="请输入库房名称"
-                  @change="querySearchSignReqNmChange"
-                  clearable
-
-                  @select="handleBlur"
-              ></el-autocomplete>
+            <el-form-item label="客户简称" prop="customerShortNm">
+              <el-input v-model="form.customerShortNm" placeholder="请输入客户简称"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="区号" prop="areaCd">
-              <el-autocomplete
-                  v-model="form.areaCd"
-                  :fetch-suggestions="querySearChareaCd"
-                  placeholder="请输入区号"
-                  @change="querySearChareaCdChange"
-                  clearable
-
-                  @select="handleBlurQh"
-              ></el-autocomplete>
+            <el-form-item label="联系人" prop="contactPerson">
+              <el-input v-model="form.contactPerson" placeholder="请输入联系人"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="垛位号" prop="stackCd">
-<!--              <el-autocomplete-->
-<!--                  v-model="form.stackCd"-->
-<!--                  :fetch-suggestions="querySearChareaCd"-->
-<!--                  placeholder="请输入垛位号"-->
-<!--                  clearable-->
-<!--              ></el-autocomplete>-->
-              <el-input v-model="form.stackCd"></el-input>
+            <el-form-item label="联系方式" prop="contactInfo">
+              <el-input v-model="form.contactInfo" placeholder="请输入联系方式"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="备注">
+            <el-form-item label="默认地址" prop="defaultAddress">
               <el-input
-                  v-model="form.remarks"
+                  v-model="form.defaultAddress"
                   :autosize="{ minRows: 2, maxRows: 4 }"
                   type="textarea"
-                  placeholder=""
+                  placeholder="请输入默认地址"
               />
             </el-form-item>
           </el-col>
 </template>
 
 <script setup>
-import ButtonBar from '@/components/ButtonBar.vue'
-
 import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
 import tools from '@/tools'
-import Attachment from '@/components/Attachment.vue'
 import ButtonBox from "@/components/ButtonBox.vue";
-import SearchBox from "@/components/SearchBox.vue";
-import SelectorComponent from "@/views/sal/components/Selector_component.vue";
 
 const {
   proxy
 
 
 
-const PopupMenuTreeRef = ref(null)
-const showPop = () => {
-  console.log('showPop')
-  PopupMenuTreeRef.value.show()
-}
-const url = ref('sto/Config/query')
-const pageType = ref(true)
+const url = ref('Customer/query')
 
 /**
  *   查询
  */
+
 const form = ref({
-  storeNm: '',
-  areaCd: '',
-  stackCd: '',
-  storeType: '',
-  id1: '',
-  id2: '',
-  id3: '',
+  customerNm: '',
+  customerShortNm: '',
+  contactPerson: '',
+  contactInfo: '',
+  defaultAddress: ''
 });
-/*method方法调用后端接口查询子类的值*/
-
 
 const query = ref({
-  storeNm: '',
-  areaCd: '',
-  stackCd: '',
-  storeType: ''
+  customerNm: '',
+  customerShortNm: '',
+  contactPerson: '',
+  contactInfo: '',
+  defaultAddress: ''
 })
 const tableData = ref([])
 const TableBoxRef = ref(null)
 
 
 
-/*绑定监听*/
-
-// 定义一个方法
-const handleBlur = (item) => {
-
-  console.log(item)
-  form.value.id1 = item.id
-};
-const querySearChareaCdChange = (item) => {
-
-  console.log('通过input，将id2，清除·····')
-  // form.value.id2 = ''
-};
-const querySearchSignReqNmChange = (item) => {
-
-  console.log('通过input，将id1，清除·····')
-  // form.value.id1 = ''
-};
-const handleBlurQh = (item) => {
-
-  console.log("区号选择···",item)
-  form.value.id2 = item.id
-};
-
-// 定义一个方法来获取建议
-const querySearchSignReqNm = (queryString, cb) => {
-  var ss = []
-  if (form.value.storeType == '' || form.value.storeType == null){
-    return cb(ss);
-  }
-  var url = 'sto/Config/queryAllKF'
-  var obj = {
-    storeType: form.value.storeType,
-    activeStatus: '0',
-    storeNm: form.value.storeNm
-  }
-  var param = {
-    params: JSON.stringify(obj),
-  }
-  proxy.$axios.get(url, param).then(response => {
-    if (response.data.code == '0') {
-      console.log(  response.data.data.records)
-      response.data.data.records.forEach((item) => {
-        ss.push({value :item.storeNm , id: item.id})
-      })
-      cb(ss);
-      console.log('ss' , ss)
-    } else {
-      ElMessage.error('操作失败！' + response.data.msg)
-      cb(ss);
-    }
-  })
-};
-
-const querySearChareaCd = (queryString, cb) => {
-  var ss = []
-  if (form.value.id1 == '' || form.value.id1 == null){
-    return cb(ss);
-  }
-
-  var url = 'sto/Config/queryAllQH'
-  var obj = {
-    fId: form.value.id1,
-  }
-  var param = {
-    params: JSON.stringify(obj),
-  }
-  proxy.$axios.get(url, param).then(response => {
-    if (response.data.code == '0') {
-      console.log(  response.data.data.records)
-      response.data.data.records.forEach((item) => {
-        ss.push({value :item.areaCd , id: item.id})
-      })
-      cb(ss);
-      console.log('ss' , ss)
-    } else {
-      ElMessage.error('操作失败！' + response.data.msg)
-      cb(ss);
-    }
-  })
-};
-
-const querySearchStackCd = (queryString, cb) => {
-  var ss = []
-  var url = 'sto/Config/queryAll'
-  var obj = {
-    fId: form.value.id_2,
-  }
-  var param = {
-    params: JSON.stringify(obj),
-  }
-  proxy.$axios.get(url, param).then(response => {
-    if (response.data.code == '0') {
-      console.log(  response.data.data.records)
-      response.data.data.records.forEach((item) => {
-        ss.push({value :item.storeNm})
-      })
-      cb(ss);
-      console.log('ss' , ss)
-    } else {
-      ElMessage.error('操作失败！' + response.data.msg)
-      cb(ss);
-    }
-  })
-};
 
 /**
  * 分页
 const ruleFormRef = ref()
 
 const rules = reactive({
-  storeType: [
-    {required: true, message: '不允许为空', trigger: 'change'},
+  customerNm: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
   ],
-  storeNm: [
-    {required: true, message: '不允许为空', trigger: 'change'},
+  customerShortNm: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
   ],
-  areaCd: [
-    {required: true, message: '不允许为空', trigger: 'change'},
+  contactPerson: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
   ],
-  stackCd: [
-    {required: true, message: '不允许为空', trigger: 'change'},
+  contactInfo: [
+    {required: true, message: '不允许为空', trigger: 'blur'},
   ],
+  // defaultAddress: [
+  //   {required: true, message: '不允许为空', trigger: 'blur'},
+  // ],
 
 })
 
 const insertDialog = () => {
   form.value = {
-    storeNm: '',
-    areaCd: '',
-    stackCd: '',
-    storeType: '',
-    activeStatue: '',
-    remarks: ''
+    customerNm: '',
+    customerShortNm: '',
+    contactPerson: '',
+    contactInfo: '',
+    defaultAddress: ''
   }
   dialogVisible.value = true
 }
   ruleFormRef.validate((valid) => {
     if (valid) {
       console.log('submit!')
-      var url = 'sto/Config/save'
+      var url = 'Customer/save'
       var param = {
         json: JSON.stringify(form.value),
 
   ruleFormRef.validate((valid) => {
     if (valid) {
       console.log('submit!')
-      var url = 'sto/Config/insert'
+      var url = 'Customer/save'
       var param = {
         json: JSON.stringify(form.value),
 
 }
 
 const handleEdit = (row) => {
-  if (row.activeStatus == '0') {
-    ElMessage({
-      type: 'warning',
-      message: '数据生效中，不允许操作！'
-    })
-    return
-  }
-
-  var url = 'sto/Config/queryByPK'
+  var url = 'Customer/queryByPK'
   var param = {
     id: row.id
   }
   proxy.$axios.get(url, param).then(response => {
     if (response.data.code == '0') {
-      // Object.assign(insertForm, {
-      //   ...response.data.data,
-      // });
-
       form.value = response.data.data
       console.log(form.value)
+      dialogVisibleEdit.value = true
     } else {
       ElMessage.error('操作失败！' + response.data.msg)
     }
   })
-  dialogVisibleEdit.value = true
 }
 
 const handleRemove = (row) => {
-  if (row.activeStatus == '0' || row.activeStatus == '1') {
-    ElMessage({
-      type: 'warning',
-      message: '数据非新增状态，不允许操作！'
-    })
-    return
-  }
-  var url = 'sto/Config/remove'
+  var url = 'Customer/remove'
   var param = {
     id: row.id
   }
               message: '删除成功！',
             });
             getTableData()
-            // TableBoxRef.value.search()
           } else {
             ElMessage.error('操作失败！' + response.data.msg)
           }
 
 }
 
-const start = (param) => {
-  if (multipleSelection.value.length < 1) {
-    ElMessage({
-      type: 'warning',
-      message: '请选择要生效的数据!'
-    })
-    return
-  }
-  edit('生效', param)
-
-}
-
-const shutdwon = (param) => {
-  if (multipleSelection.value.length < 1) {
-    ElMessage({
-      type: 'warning',
-      message: '请选择要失效的数据!'
-    })
-    return
-  }
-  edit('失效', param)
-
-}
-
-const edit = (title, val) => {
-  var ids = []
-  for (var i = 0; i < multipleSelection.value.length; i++) {
-    ids.push(multipleSelection.value[i].id)
-    ids.push(multipleSelection.value[i].id1)
-    ids.push(multipleSelection.value[i].id2)
-  }
-
-  var param = {
-    ids: JSON.stringify(ids),
-    status: val
-  }
-  var url = 'sto/Config/startAndShutDown'
-  ElMessageBox.confirm(
-      '此操作将' + title + '该数据, 是否继续?',
-      '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
-        draggable: true,
-      }
-  )
-      .then(() => {
-        proxy.$axios.post(url, param).then(response => {
-          if (response.data.code == '0') {
-
-            ElMessage({
-              type: 'success',
-              message: title + '成功！',
-            });
-
-            getTableData()
-            // TableBoxRef.value.search()
-          } else {
-            ElMessage.error('操作失败！' + response.data.msg)
-          }
-        })
-      })
-      .catch(() => {
-        ElMessage({
-          type: 'info',
-          message: '已取消',
-        })
-      })
-
-
-}
 
 /**
  * 保存、修改、删除
 const handleExport = () => {
   console.log('handleExport')
 }
-const dictList = ref({})
-
-const dictData = () => {
-  var url = 'framework/Common/querySelectorList'
-  var param = {
-    type: JSON.stringify(['STORE_TYPE' , 'START_STATUS'])
-  }
-  proxy.$axios.get(url, param).then(response => {
-    if (response.data.code == '0') {
-      dictList.value = response.data.data
-      console.log(response.data.data)
-
-    } else {
-      ElMessage.error('操作失败！' + response.data.msg)
-    }
-  })
-}
-
-
-const storeTypeDict = (val) => {
-  form.value.storeType = val
-}
 const getTableData = () => {
-  var url = 'sto/Config/query'
+  var url = 'Customer/query'
   var param = {
     page: currentPage.value,
     rows: pageSize.value,
-    storeNm: query.value.storeNm,
-    areaCd: query.value.areaCd,
-    stackCd: query.value.stackCd,
-    storeType: query.value.storeType,
+    customerNm: query.value.customerNm,
+    customerShortNm: query.value.customerShortNm,
+    contactPerson: query.value.contactPerson,
+    contactInfo: query.value.contactInfo,
+    defaultAddress: query.value.defaultAddress,
     json: JSON.stringify(query.value)
   }
   proxy.$axios.get(url, param).then(response => {
     }
   })
 }
-const formatterStr = (col,value) => {
-  if (!value || value == null || value == '') {
-    return value
-  }
-
-  switch (col) {
-    case 'status':
-      value = dictList.value && Array.isArray(dictList.value.START_STATUS)
-          ? dictList.value.START_STATUS.find(item => item.dicCode == value)?.dicName
-          : undefined
-      break
-  }
-  return value
-
-}
 const height = ref(600)
 const updateViewportHeight = () => {
   height.value = window.innerHeight * 0.65
   console.log( window.innerHeight);
 };
-
-const formatter = (row, column, cellValue, index) => {
-  if (!cellValue || cellValue == null || cellValue == '') {
-    return cellValue
-  }
-  switch (column.property) {
-    case 'storeType':
-      cellValue = dictList.value && Array.isArray(dictList.value.STORE_TYPE)
-          ? dictList.value.STORE_TYPE.find(item => item.dicCode == cellValue)?.dicName
-          : undefined
-      break
-  }
-  return cellValue
-
-}
 onMounted(() => {
-  dictData()
   getTableData()
   updateViewportHeight()
-
-
-
 })
 </script>