cdn引入vue和ElementPlus

问答 / 0 / 0 / 创建于 1年前 / 更新于 1年前
<head>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
 <link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/theme-chalk/index.css”>

  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

<div id="app">
 <div class="alert mt15 mb5">
 <strong>{$Think.lang.operating_instructions}：</strong>
 <ul> <li>{$Think.lang.sellerspec_tip1}</li>
 <li>  {$Think.lang.sellerspec_tip2}
                <font color="red">{$Think.lang.sellerspec_tip3}</font>
  {$Think.lang.sellerspec_tip4}
            </li>
 <li>{$Think.lang.sellerspec_tip5}</li>
 </ul> </div>
 <div dstype="add_sv" class="dssc-btn" @click="dialogFormVisible = true">
 <i class="iconfont"></i>添加规格值
  </div>

 <table class="dssc-default-table" style="width: 100%;">
 <thead> <tr> <th class="w80">id</th>
 <th class="tl">规格值名称</th>
 <th class="w300 tl">排序</th>
 <th class="w110">操作</th>
 </tr> </thead>
 <tr class="bd-line" v-for="(item,key) in specList">
 <td class="w80">{{item.sp_id}}</td>
 <td class="tl">{{item.sp_name}}</td>
 <td class="w300 tl">{{item.sp_sort}}</td>
 <td class="w110 dscs-table-handle">
 <span class="btn-orange"><el-button @click="handleDelete(key)"
  type="info">删除</el-button></span>
 <span><el-button @click="showFormDialog(key)" type="success">修改</el-button></span>

 </td> </tr>
 </table>
 <el-dialog v-model="dialogFormVisible" title="Shipping address" :visible.sync="formDialogVisible" :before-close="handleClose">
 <el-form :model="form" ref="refForm" :rules="formRules">
 <el-form-item label="id" prop="sp_id" v-show="isShowSpId">
 <el-input v-model="form.sp_id" :disabled="true"></el-input>
 </el-form-item> <el-form-item label="名称" prop="sp_name">
 <el-input v-model="form.sp_name"></el-input>
 </el-form-item> <el-form-item label="排序" prop="sp_sort">
 <el-input-number v-model="form.sp_sort" :min="0" :max="99999"/>
 </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
 <el-button @click="handleClose">取 消</el-button>
 <el-button type="primary" @click="handleSubmit">确 定</el-button>
 </div> </el-dialog>
</div>

<script>
  const {createApp} = Vue

    const app = createApp({
        data() {
            return {
                specList: [],
  dialogFormVisible: false,
  isShowSpId: false,
  form: {
                    sp_name: '',
  sp_id: '',
  sp_sort: ''
  },
  titleMap: {
                    addEquipment: "新增",
  editEquipment: "修改",
  },
  formRules: {
                    sp_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  sp_sort: [
                        { required: true, message: '请输入排序', trigger: 'blur' },
  { type: 'integer', message: '请输入正确的排序', trigger: 'blur'},
  ],
  sp_id: '',
  },

  sp_id_rule: [
                    { required: true, message: '请输入sp_id', trigger: 'blur' },
  ],
  }
        },
  mounted() {
            axios.get('http://local.dsmall.com/home/Sellerspec/list.html')
                .then(response => {

                    if (response.data.code === 10000) {
                        this.specList = response.data.data;
  }else {
                        this.$message.error({
                            message: response.data.msg,
  type: 'error'
  })
                    }
                })
                .catch(error => {

                    ElementPlus.ElNotification({
                        title: 'Title',
  message: ('i', {style: 'color: teal'}, error),
  })

                    console.log(error)
                })
        },
  methods: {

            showFormDialog(id) {
                this.dialogFormVisible = true;

 if (id === undefined || this.specList[id] === undefined) {
                    this.form.sp_id = ''
  this.form.sp_name = ''
  this.form.sp_sort = ''
  return
  }

                this.form.sp_id = this.specList[id].sp_id
  this.form.sp_name = this.specList[id].sp_name
  this.form.sp_sort = this.specList[id].sp_sort

  this.formRules.sp_id = this.sp_id_rule
  },
  handleEdit() {

                this.$refs.refForm.validate(valid => {
                    if (valid) {

                        const data = axios.post('http://local.dsmall.com/home/Sellerspec/edit.html', this.form,{
                            sp_id: this.form.sp_id,
  sp_name: this.form.sp_name,
  sp_sort: this.form.sp_sort
  }).then(response => {
                            console.log(response.data)
                            if (response.data.code === 10000) {
                                this.specList.push(response.data.data)
                                this.$message.success({
                                    message: '修改成功',
  type: 'success'
  })
                            }else {
                                this.$message.error({
                                    message: response.data.msg,
  type: 'error'
  })
                            }
                        }).catch(error => {
                                console.log(error)
                            })

                    } else {
                        // 表单验证不通过
  console.log('error submit!!')
                        return false
  }
                })
            },

  handleSubmit() {

                this.$refs.refForm.validate( async (valid) => {

                    if (valid) {
                        try {

                            const data = await axios.post('http://local.dsmall.com/home/Sellerspec/create.html', {
                                sp_name: this.form.sp_name,
  sp_sort: this.form.sp_sort
  })

                            console.log(data.data)

                            if (data.data.code === 10000) {
                                this.$message.success('添加成功')
                                this.specList.push(data.data.data)

                                this.dialogFormVisible = false
  } else {
                                this.$message.error(data.data.msg)
                            }

                        } catch (error) {
                            console.log(error)
                            this.$message.error(error.message)
                        }

                    }
                })
            },

  handleDelete(key) {

                this.$confirm('确认删除该规格值吗？')
                    .then(async () => {
                        try {
                            const item = this.specList[key]

                            const {data} = await axios.post('http://local.dsmall.com/home/Sellerspec/delete.html', {
                                sp_id: item.sp_id
  })
                            if (data.code === 10000) {
                                this.$message.success({
                                    message: '删除成功',
  type: 'success'
  })
                                this.specList.splice(key, 1)
                            } else {
                                this.$message.error({
                                    message: data.data.msg,
  type: 'error'
  })
                            }
                        } catch (error) {
                            console.log(error)
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
  message: '已取消删除'
  })
                    })
            },

  handleClose:function () {
                this.dialogFormVisible = false
 this.form.sp_name = ''
  this.form.sp_id = ''
  this.form.sp_sort = ''
  }
        }
    })

    // 注册表单组件
  app.use(ElementPlus);

  app.mount('#app');
</script>